vue-cssvar

Vue 注入 CSS 变量控制样式 (兼容 vue2 , vue3)

样例：点击 div。div 以及其 hover伪类会变色。

<template>
	<div v-css="{a,b}" class="box" @click="changeColor"></div>
</template>
export default {
  data(){
    return {
      a : 'blue',
      b : 'pink'
    }
  },
  methods: {
    changeColor(){
      this.a = this.a === 'blue' ? "red" : "blue"
      this.b = this.b === 'pink' ? "yellow" : "pink"
    }
  }
}
</script>
<style>
  .box {
    width : 100px;
    height : 100px;
    background-color : var(--a);
  }
  .box:hover {
    background-color : var(--b);
  }
</style>

简便了 vue 处理元素 style ，以及可以直接修改伪类伪元素的样式。

使用

vue3 注册指令

import { createApp } from 'vue'
import vueCssvar from 'vue-cssvar'
const app = createApp(App)
vueCssvar(app)
app.mount('#app')

vue2注册指令

import Vue from 'vue'
import vueCssvar from 'vue-cssvar'
vueCssvar(Vue)
new Vue({
  render: function (h) { return h(App) },
}).$mount('#app')

vueCssvar 参数

1. 参数1 ： 指令要绑定的应用，及 vue2 的 Vue、vue3 的 app。
2. 参数2 ： 相关配置 options

• options.name 指令名，默认 'css'

vueCssvar(app,{
	name : 'custom'
})
	
-----------template-------------
<div v-custom="{a,b}" class="box" @click="changeColor"></div>
	

• options.isPx 值为数字时默认加上px方便计算，默认 true

vueCssvar(app,{
	isPx : 'true'
})
	
-----------template-------------
<div v-css="{c,b}" class="box" @click="changeColor">hello</div>
<script>
export default {
data(){
  return {
    c : 1,
    b : '700' //如果不必须后面加px，使用字符串类型
  }
},
methods: {
  changeColor(){
    this.c++;
  }
}
}
</script>
<style>
.box {
// 使用 css 内置函数计算其 width,此时的var(--c)为 1px
  width : calc( var(--c) * 100); 
  height : 100px;
  background-color : red;
  font-weight: var(--b);
}
</style>

	

• options.toLine 驼峰命名法转中划线命名法（中划线命名法符合css规范），默认 false

vueCssvar(app,{
	toLine : true
})
	
-----------template-------------
<div v-css="{userAvatarColor}" class="box" @click="changeColor"></div>

-----------script---------------
data(){
  return { 
    userAvatarColor: 'green'
  }
}

-----------style-----------------
color : var(--user-avatar-color)