Vue进阶 - 自定义指令

封装多个自定义指令

//  common/directive.js
import Vue from 'vue' // 引入vue

function checkAuth(key) {
  // 权限数组
  let jurisdictionList = [1,2,3,4,5]
  let index = jurisdictionList.indexOf(key)
  console.log('index:',index)
  if (index > -1) {
    // 有权限
    return true
  } else {
    // 无权限
    return false
  }
} 

// 优雅操作 - VUE自定义指令
Vue.directive('auth',{
  inserted(el, binding){
    // inserted → 元素插入的时候 
    let value = binding.value // 获取到 v-permission的值 
    if(value){
      let hasPermission = checkAuth(value)
      if(!hasPermission){
        // 没有权限 移除Dom元素
        el.parentNode && el.parentNode.removeChild(el)
      }
    }else{
      console.log('需要传key')
    }
  }
})

Vue.directive("colors",function(el,binding){ 
    let value = binding.value // 获取到 v-permission的值
    if(value){ 
      el.style["color"]= value;
    }else{
      //throw new Error('需要传key')
      console.log('需要传key')
    }
})

main.js中引入

import directive from './common/directive.js'

页面中直接使用指令

<template>
  <div>
    pages
    <div v-auth="10">
      <button>权限1</button>
    </div>
    <div v-auth="5">
      <button>权限2</button>
    </div> 
    <span v-colors="'red'">XXXX</span>
    <span v-colors="'blue'">XXXX</span>
  </div>
</template>
 

不同的钩子

bind:function(el,binding,vnode){ },
inserted:function(el,binding,vnode){ },
update:function(el,binding,vnode){ },
componentUpdated:function(el,binding,vnode){ },
unbind:function(el,binding,vnode){ },