持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

vue3如何做的

在我之前的文章里，有介绍到vue3对css变量的一个辅助方法，v-bind,它是这样使用的

<template>
    <p>123</p>
</template>
<script setup>
 const a = ref('red')
 settimeout(()=>{
  a.value = 'blue'
 })
</script>
<style scoped>
    p{ color:v-bind('a') }
</style>

在vue3中其实通过编译器去处理这个问题，你很难把这个功能移植到vue2里，但是我们可以通过另一个方法实现：那就是自定义指令

什么是自定义指令

vue中的指令就是普通dom执行一些底层操作的一个方便接口。例如我们常用的v-show,v-if，这些是官方指令。vue2还运行我们自定义指令已完成一些自己需要的操作。

我大概写一下官方的api

Vue.directive('any', {
    bind:function(e){
         //指令第一次绑定到元素时调用，仅执行一次
    },
    inserted: function (el) { 
        // 当被绑定的元素插入到 DOM 中时
    },
    update:function(e){
        // 虚拟dom更新时
    },
    componentUpdated:function(e){
        // 指令所在组件更新了
    },
    unbind:function(e){
        // 指令解绑
    }
})

使用的时候就是

<template>
<p v-any="xxx" >123</p>
</template>

css变量API

我这里简单介绍一下css变量，如果需要更详细的解读，建议你阅读这篇文章www.ruanyifeng.com/blog/2017/0…

我们现在在body下新建一个css变量

:root{
    --color:red;
}

• 使用css变量

p{
 color:var(--color)
}

• js读取css变量

document.body.style.getPropertyValue('--color');

• js更新css变量

document.body.style.setProperty('--color','blue');

• js删除css变量

document.body.style.removeProperty('--color');

下面，我们就将这些组装起来，通过vue directive API。

v-css-var

我们知道vue插件都需要导出一个install函数。

export default {
    intall:function(){}
}

为了保险起见，我们需要判断一下当前浏览器支不支持css变量，哪怕现在css变量的支持已经很好了。

const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a','0')

这样我们就有了基本的结构,我的实现如下，大家也可以直接安装我写的npm包. www.npmjs.com/package/v-c…

什么时候使用css变量

其实我写css变量写的很多，但其实在vue里，大部分人可能会更习惯使用v-show，或者拼接style字符串，其实这样就已经相当于大部分css变量的功能了，因此大家无需迷信css变量，但是在主题色，暗黑模式的时候，使用css变量确实毕竟方便