Vue - 自定义指令

//  main.js 全局注册
import Vue from 'vue';
import App from './App.vue';

// 基础写法
<div v-highLight:background.delayed='red'></div>

// 单数
Vue.directive('highLight',{
  bind(el,binding,vnode,oldVnode);

  var delay = 0;

   if(binding.modifiers['delayed']){ // 修饰符 .delayed
      delay = 3000;
    }
  // el对象的样式属性; binding值
  el.style.backgroundColor = 'blue' // 背景色为蓝色
  el.style.backgroundColor = binding.value // 背景色为自定义

  setTimeout(()=>{
      if(binding.arg === 'background'){  // el.style.backgroundColor = binding.value //     背景色为自定义
        el.style.backgroundColor = binding.value // 背景色为自定义
      }else{
        /* 代码 */
      }
   },delay)
}

// 局部注册

<div v-local-highLight:background.delay='red'></div>

directives:{  // 复数
  'local-highLight':{
    bind(el,binding,vnode){
      setTimeout(()=>{
          if(binding.arg === 'background'){  // el.style.backgroundColor = binding.value //     背景色为自定义
            el.style.backgroundColor = binding.value // 背景色为自定义
          }else{
            /* 代码 */
          }
       },delay)
    }
  }
}