Css中该如何使用Vue的变量
作者：A-sleep
在我们使用Vue开发时,经常会用到CSS,下面这篇文章主要给大家介绍了关于Css中该如何使用Vue变量的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
应用场景:(Vue一键换肤 – 修改 tagsView 动态选中样式)
1.css中如何用变量
声明css变量的时候，变量名前面要加两根连词线（–）。
变量名大小写敏感，–header-color和–Header-Color是两个不同变量。
var()函数用于读取变量。
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
第二个参数不处理内部的逗号或空格，都视作参数的一部分。
<span
v-for="tag in visitedViews"
:key="tag.path"
class="tags-view-item" //默认样式
:style="spanStyle" // 根据css中使用变量的方法,结合vue中动态行内样式进行伪元素动态属性设置
:class="isActive(tag) ? 'active' : ''"
>
{{ tag.title }}
</span>
export default {
data() {
return {
spanStyle: {
"--color": this.$store.state.settings.theme //默认值
}
};
watch: {
//侦听store里某个属性的变化
"$store.state.settings.theme": function(val) {
this.spanStyle["--color"] = val;
},
},
<style>
.tags-view-item {
//...
&.active {
background-color: var(--color);
color: #fff;
border-color: var(--color);
&::before {
}
}
}
}
</style>
渐变按钮的示例
<span class="btn"
@click="jumCZ"
:style="randomColor"//根据css中使用变量的方法,结合vue中动态行内样式进行伪元素动态属性设置
>
充值
</span>
export default {
data() {
return {
randomColor: {
"--color": "#1a73e8" // 默认值
}
};
},
watch: {
//侦听store里的settings模块下的state里的 theme 发生变化 产出随机颜色
"$store.state.settings.theme": function(val) {
const randomColor = Math.floor(Math.random() * 16777215).toString(16);
this.randomColor["--color"] = "#" + randomColor;
}
},
}
<style>
.btn {
width: 70px;
height: 20px;
background-image: linear-gradient(
to right,
var(--color) 0%, //使用data中的变量
#79cbca 51%,
#77a1d3 100%
);
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
border-radius: 10px;
display: block;
cursor: pointer;
font-size: 14px;
line-height: 18px;
}
.btn:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
</style>总结
到此这篇关于Css中该如何使用Vue的变量的文章就介绍到这了,更多相关Css使用Vue变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！