简易实现 vue 自定义指令 控制页面中按钮的显示与隐藏

Vue2 中使用自定义指令进行控制页面元素的显示与隐藏

创建自定义指令文件

permission.js

import Vue from "vue";
import store from "@/store/index.js";

Vue.directive("hasPerm", {
    inserted(el, binding) {
        // 使用自定义指令的传值
        const { data } = binding;
        // 后端获取的权限标识数据
        const PermList = store.stare.user.permissions;
        // 是否存在对应的按钮权限
        let item = PermList.filter(i => item === data );

        if(item.length == 0) {
          el.parentNode && el.parentNode.removeChild(el)
        }
    }
})

在页面中使用自定义指令

<template>
  <div class="container">
    <button v-hasPerm="system-list">按钮</button>
  </div>
</template>