vue使用自定义属性控制权限

Vue.directive

当我们需要控制一组按钮根据用户权限进行隐藏显示时， 如果使用v-if会非常的麻烦，这时候我们可以使用自定义指令的方式。先在按钮上使用自定义指令b-show-btn(注意这个v-)，然后写上属性值。通过自定义指令的，inserted可以获取到自定义指令的权限值，再根据这个权限值去和后台返回给我们的权限列表进行对比，从而控制按钮的隐藏和显示。

权限判断方法

export function checkArray(key) {
  let arr = [1, 3, 5]
  let index = arr.indexOf(key)
  console.log(index)
  if (index > -1){
    return true 
  }else {
    return false
  }
}

import {checkArray} from './common/array'

Vue.directive('show-btn', {
  inserted(el, binding){
    console.log('11',binding);
    let showBtn = binding.value
    if(showBtn){
      let hasPermission = checkArray(showBtn)
      if(!hasPermission){
        el.parentNode && el.parentNode.removeChild(el)
      }
    }else{
      throw new Error('error')
    }
  }
})

<template>
  <div class="">
    <button v-show-btn="1">按钮1</button>
    <button v-show-btn="2">按钮2</button>
  </div>
</template>

只有按钮1 会被显示出来