vue3中 css的变量
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
现在vue3定义全局变量不使用less和sass也可以做的看 这就是vue3 的新特性,下面我们来学习一下
-- 方式创建变量
在全局引入初始化css时,用 --name 定义变量
body {
--colorRed: rgb(250, 35, 35);
--colorblue: rgb(35, 56, 250);
--colorYellow: rgb(229, 255, 0);
--colorOrange: rgb(255, 136, 0);
--box: 100px;
}
在vue里使用
<template>
<div class="dong">
<h3 class="h3">--color的使用</h3>
<div class="box box1">
--colorRed
</div>
<div class="box box2">
--colorblue
</div>
<div class="box box3">
--colorYellow:
</div>
<div class="box box4">
--colorOrange
</div>
</div>
</template>
<script setup>
</script>
<style lang="less" scoped>
.dong{
width: 100%;
height: 100%;
color: #fff;
background: #fff;
font-size: 18px;
.box{
width: var(--box);
height: var(--box);
}
.box1{
background: var(--colorRed);
}
.box2{
background: var(--colorblue);
}
.box3{
background: var(--colorYellow);
}
.box4{
background: var(--colorOrange);
}
.h3{
font-size: 20px;
color: #000;
}
}
</style>
效果
注意: 如果有局部变量,那么局部变量优先级比body的高
动态样式
使用v-bind绑定变量, 注意使用reactive需要加引号, 同时也可以修改变量
<template>
<div class="dong">
<h3 class="h3">--color的使用</h3>
<div class="box box1">
</div>
<div class="box box2">
</div>
<div class="box box3">
</div>
<div class="box box4" @click="setColor">
</div>
</div>
</template>
<script setup>
import {ref,reactive} from "vue"
let color1 = ref("red");
let colorobj = reactive({
color2: "#04ffd5",
color3: "rgba(158, 0, 240, 1)"
})
let color4 = ref("red");
const setColor = ()=>{
color4.value = "#04ffd5"
}
</script>
<style lang="less" scoped>
.dong{
width: 100%;
height: 100%;
color: #fff;
background: #fff;
font-size: 18px;
.box{
width: 100px;
height: 100px;
}
.box1{
background: v-bind(color1);
}
.box2{
background: v-bind('colorobj.color2');
}
.box3{
background: v-bind('colorobj.color3');
}
.box4{
background: v-bind(color4);
}
.h3{
font-size: 20px;
color: #000;
}
}
</style>
全局样式:global()
可以直接在组件里面写,全局生效, 一般不建议用
<style lang="scss" scoped>
// div .class #id
:global(div) {
background-color: #e3e3e3e8;
}
</style>
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)