Vue.directive自定义指令改变颜色

最新推荐文章于 2023-09-04 16:36:33 发布

刹那烟火//

最新推荐文章于 2023-09-04 16:36:33 发布

阅读量1.6k

点赞数

分类专栏：前端 vue h5

本文链接：https://blog.csdn.net/holily_/article/details/103727345

版权

vue 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

最好在全局写，这样都会生效，或者当前页面，必须引入
import Vue from ‘vue’

Vue.directive('rest-styleBackground', function(dom, definition) { //背景颜色
    dom.style.background = definition.value
})

<template>
 <div>
    <span style="width:100px;height:100px" v-rest-styleBackground="colors">设计归属感和三个环节</span> 
 </div>
</template>
<script>
import Vue from 'vue'
  export default {
    data() {
     return {
         colors:"",//定义变量接收
       }
    },
    created(){
      //1.普通颜色
      //this.colors="red"
      //2.渐变颜色
       var a = "rgba(1,119,255,1)";
       var b = "rgba(116,186,253,1)";
       this.colors = "linear-gradient(180deg, " + a + "0%," + b + " 100%)";
    }
  }
</script>