vue自定义指令钩子函数

Posted 2021-07-17 安之ccy

官网地址

指令钩子函数参数：

示例：
全局钩子
1.把标题设置为彩虹色：
在main.js定义：

// 自定义指令，彩虹色
Vue.directive("rainbow",{
  bind(el){
    el.style.color = '#'+Math.random().toString(16).slice(2,8)
  }
})

在模板中使用：

<h3 v-rainbow>{{blob.title}}</h3>

2.改变容器的max-width和背景颜色
定义：

// 自定义指令：宽度调整
Vue.directive("width",{
  bind(el, binding){
    if (binding.value == 'wide'){
      el.style.maxWidth = "1260px";
    }else if (binding.value == 'narrow'){
      el.style.maxWidth = '768px'
    }
    if (binding.arg == "color"){
      el.style.backgroundColor = '#6677cc';
      el.style.padding = "20px";
    }
  }
})

使用：

<div id="show-blobs" v-width:color="'narrow'"></div>
<!--或者写成wide-->
<div id="show-blobs" v-width:color="'wide'"></div>

注意此处’wide’是字符串，用引号括起

局部钩子函数：
写在子组件的directives属性里：

directives:{
   "rainbow":{
       bind(el){
         el.style.color = '#'+Math.random().toString(16).slice(2,8)
       }
   }
}