美文网首页
vue 在style标签中引入js变量控制样式

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

作者: lazy_tomato | 来源:发表于2022-03-10 14:42 被阅读0次

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

  1. 引入插件

    import cssVars from 'css-vars-ponyfill'

  2. 初始化一下

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

  1. 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>
image-20220310135247597

END

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

相关文章