START
如果希望元素的样式根据js
代码去控制,常见的办法呢,是在元素的style属性绑定变量即可
例如
<h3 :style="{ color: colorList[0] }">1.基本的绑定样式示例</h3>
详细用法可参考下面的博客:
/p/2b82ee1e6199
但是如果style不满足需求,想在style标签中使用变量怎么办?
开始
安装插件css-vars-ponyfill
npm i css-vars-ponyfill -S
引入插件
import cssVars from 'css-vars-ponyfill'
初始化一下
created() {cssVars({onlyLegacy: true,variables: {'--component-edit-tablecheck-box-color':this.$store.state.themeModule.theme.currentThemeColor.color,},})},
style中使用
border-color: var(--component-edit-tablecheck-box-color);
完整的代码
<template><div><div class="tomato"> vue 在style标签中引入js变量控制样式 lazy_tomato </div></div></template><script>import cssVars from 'css-vars-ponyfill'export default {created() {cssVars({onlyLegacy: true,variables: {'--lazy-tomato':'pink'},})},}</script><style>.tomato {background: var(--lazy-tomato);}</style>