h5页面自定义主题色(vue)

vue

  最近接到了个需求,说是要把页面做成可自定义主题色,通过sdk来获取色值,然后前端来展示不同的主题色,这样不同的商家就可以配置不同的颜色了。

  以前没遇到过,此次遇到了研究下,特此简单记录如下。

  这里以.vue单文件组件,css写法为例,没有用到css预处理器。

  在data函数中定义色值。如 myColor: '#fe4d4d' 

  然后在该组件的根元素上这样写: :style="{'--color': myColor}" 

  然后在<style scoped>标签里写法如下:例如我要更改.title的样式,那么就可以这样写了 .title{ color:var(--color); } 

以上是 h5页面自定义主题色(vue) 的全部内容, 来源链接: utcz.com/z/378840.html

回到顶部