vue通过自定义指令控制不同角色页面显示什么按钮

快来打我* 2022-11-12 01:47 282阅读 0赞

main.js中引入import ‘./plugins/button-check.js’

button-check.js’

import Vue from "vue"
    
    // 在开发中,buttonList的相关数据都是后端给的
    // 这里为了省事，直接写成了我所需要的数据格式,
    // 你们需要根据后端返回的数据进行提取或直接使用,
    // 使用了name标识,但建议用btn-code作为唯一标识，像id一样.
    
    const buttonList = [
      {  name: "编辑", permission: true }, // permission控制展示隐藏
      {  name: "删除", permission: false }
    ]
    //如果后端返回的可以存在混村，取出来sessionStorage.getItem
    /** * 判断按钮是否有权显示 * @param name * @returns {boolean} */
    function isButtomShow(buttonList, name){ 
     // 根据name匹配唯一
      return buttonList.some(v => v.name && v.name === name && v.permission)
    }
    
    // 按钮存在且为true,则显示
    
    Vue.directive('button-check',{ 
      inserted(el, binding, vnode) { 
        const name = binding.value // 接受指令传入的值
        if(!isButtomShow(buttonList, name)){ 
          el.parentNode.removeChild(el) // 移除节点
        }
      }
    })

使用

<template>
      <div>
        
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>数据统计</el-breadcrumb-item>
          <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        </el-breadcrumb>
        
        <el-card>
            <div v-for="(btn,idx) in btns" :key="idx" class="btn">
          
    	      <el-button v-button-check="btn.name" :class="btn.className">{ { btn.name}}</el-button>
    	    </div>
        </el-card>
      </div>
    </template>
    
    <script>
    export default { 
      data() { 
        return { 
          btns: [
            {  name: "编辑",className: "编辑" },
            {  name: "删除",className: "删除" },
          ]
        }
      }
    }
    </script>
    <style lang="less" scoped>
    
    </style>