vue怎么在style中使用data中定义的变量
需求动态修改三方组件的样式。思路项目开发中使用的某某某三方ui组件，所以想要修改这个组件的样式只能通过css进行修改，那么想要动态修改，就要在style中使用data里的变量。实现<script>...mounted() {this.$el.style.setProperty('--colorStyle', this.color)}//若该变量是动态变化的watch: {color(v
·
需求
动态修改三方组件的样式。
思路
项目开发中使用的某某某三方ui组件，所以想要修改这个组件的样式只能通过css进行修改，那么想要动态修改，就要在style中使用data里的变量。
实现
<script>
...
mounted() {
this.$el.style.setProperty('--colorStyle', this.color)
}
//若该变量是动态变化的
watch: {
color(val, oldVal) {
this.$el.style.setProperty('--colorStyle', val)
}
}
...
</script>
<style lang="scss" scoped>
/deep/ .class名称 {
color: var(--colorStyle);
}
<style>
//或者不加scoped
<style lang="scss">
.class名称 {
color: var(--colorStyle);
}
<style>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)