vue2:
通过内联样式写css变量(可以调用js里面的变量),如何在style标签里面就可以使用css变量
//方式一
:style="`
--delay:${变量1}s;
--color:hsl(${变量2},50%,50%)
`"
>
如果是uniapp开发微信小程序那么 是不能在html里面去用模板字符串定义css变量,最好是用计算属性的方式去定义css变量
//第二种方式
测试文本
export default {
data() {
return {
color: "red"
};
},
computed: {
cssVars() {
return {
"--color": this.color
};
}
}
};
.text {
color: var(--color);
}
建议写成第二种这种计算属性的方式,当值发生改变,也可以响应变化
第二种这种方式里如果是在uniapp开发微信小程序这种场景下,那么retrun不能返回对象,只能这么做:
vue3:
直接在style标签里面使用v-bind绑定js里面的变量
import { ref } from 'vue'
const color = ref('red')
.box {
width: 100px;
height: 100px;
color: v-bind(color);
}
import { ref } from 'vue'
const isActive = ref(true)
.box {
width: 100px;
height: 100px;
background-color: v-bind('isActive?"red": "white"');
}
全局的css变量的使用:
官方文档中介绍以 var(--global:xxx) 在这种方法可以使用全局的 css 变量(若使用 scoped 会自动给 css 变量附带 hash 值),但只介绍了 css 的写法:
h1 {
font-size: var(--global:fontSize);
}
这么写在 scss 是会编译报错的。摸索一番,如果要使用 scss ,请使用如下写法:
.home {
color: var(#{"--global:color"});
}
scss 动态取值 #{} 会将双引号自动去掉,从而得到 var(--global:color) ,解决了编译失败的问题
相关链接
本文由 用户 于 2024-04-02 发布在 金钥匙,如有疑问,请联系我们。
本文链接:https://www.51969.com/post/18713066.html
发表评论