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

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

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

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

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>

	

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)