vue2.0-自定义指令Directive的全局和局部的视图权限

通过minxi来实现权限配置：mixin视图权限全局引用-CSDN博客

一、自定义指令的局部使用

1、index.js

export let permission = {
  inserted(el, binding){
    let data = ["admin"]
    if(!data.includes(binding.value)){
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
}

2、单文件的引用

<div v-permission="’admin’"></div>

import { permission } from "index.js"
directives:{permission}

二、自定义指令的全局使用

1、index.js文件

import Vue  from "vue"

Vue.directive("permission", {
  inserted: function(el, binding){
    // 这是是demo，具体的数据通过接口获取
    let  data = ["admin", "role"]

    if(!data.includes(binding. value)){
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

2、main引用

// 按照自己项目中permission实际位置来
import "@/ directives/permission"

3、 使用

<template>
  <div v-if=""admin"">视图是否有权限显示</div>
</ template>