vue 在style标签中引入js变量控制样式

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>

END