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

START

• 如果希望元素的样式根据js代码去控制，常见的办法呢，是在元素的style属性绑定变量即可

• 例如

  <h3 :style="{ color: colorList[0] }">1.基本的绑定样式示例</h3>
  

  详细用法可参考下面的博客：

  https://www.jianshu.com/p/2b82ee1e6199

• 但是如果style不满足需求，想在style标签中使用变量怎么办？

开始

1. 安装插件css-vars-ponyfill

   npm i css-vars-ponyfill -S
   

2. 引入插件

   import cssVars from 'css-vars-ponyfill'
   

3. 初始化一下

    created() {
       cssVars({
         onlyLegacy: true,
         variables: {
           '--component-edit-tablecheck-box-color':
             this.$store.state.themeModule.theme.currentThemeColor.color,
         },
       })
     },
   

4. 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

• 详细使用说明可参考插件官网