【记录】【vue】自定义权限指令v-permission的简单创建及使用

【记录】【vue】自定义权限指令v-permission的简单创建及使用_小阿瑾的瑾的博客-CSDN博客_v-permission vue文章目录vue自定义指令二、v-permission的创建和使用1.创建2.使用参考后台管理项目免不了要做权限控制，常见的比如说这个用户或者这个角色对数据有有没有增删改查的权限vue自定义指令摘自vue.js官网：（一会儿只用到了inserted这个钩子函数）二、v-permission的创建和使用1.创建在项目的src文件夹下新建一个名为directives的文件夹，在directives文件夹下面新建两个js文件：index.jx和permission.js，前者用于自定义指令的注册，https://blog.csdn.net/weixin_45407816/article/details/121327333

    directives/permission.js

// import { arr } from './xxxx'
import  fn   from './xxxx.js'
 import yy from './jj'  // exprot default导出名字随便起不加花括号 
import { arr } from './kk'  //export 导出加{ }号 
export default {
  inserted (el, bindling) {
    console.log('kk',yy)
    console.log(arr ,'2222222222222222')
    // console.log(el, '/*/*/*/*')
    // console.log('/*/*/*/*', bindling)
    //bindling.value为指令的绑定值
    let perVal = bindling.value;
    if (bindling.value) {
      //假设某用户对某模块只有添加和删除的权限
      //这个权限信息(即pers)应该是不同用户登录时从后台拿到的对应的信息
      // let pers = ['add', 'delete'];
      let pers = fn.fn()
      // console.log(pers,'************************************')
      //hasPer为true为有权限
      //hasPer为false为无权限
      let hasPer = pers.some(item => {
        return item == perVal
      });
      //没有权限就先隐藏此元素吧
      if (!hasPer) {
        el.style.display = "none"
      }
    }
  }
}

 

 

directive/index    全局注册v-permission

import permission from "./permission"

console.log(permission,'---------')
//批量注册指令(现在就一个permission)
const directives = {
  permission
}
//注册的一般写法，循环遍历directives，通过vue.directive注册
export default {
  install (Vue) {
    Object.keys(directives).forEach(key => {
      Vue.directive(key, directives[key])
    })
  }
}

 xxx.js

export default {
  fn() { 
    let arr = ['1', '2', '3']
    return arr
  }
  
}

jj.js

let arr = ['1', '2', '3']
export default arr

kk.js

export  let arr = ['1','2','3']

组件中使用

<el-button type="primary" v-permission="'1'">添加</el-button>
<el-button type="primary" v-permission="'edit'">编辑</el-button>
<el-button type="danger" v-permission="'delete'">删除</el-button>

只显示添加按钮