vue封装按钮级全局指令

2021-11-22 15:31:31 阅读：154 来源： 互联网

标签：vue const projectId value Vue localStorage 按钮封装

思路：
1、将后端返回的权限列表存储到localStorage中
2、在通过自定义指令接收传过来的值与后端返回值作比较

// utils/has.js
import Vue from 'vue';

const has = Vue.directive('has', {
  // 当绑定的元素被插到DOM时
  inserted: (el, binding) => {
    /* eslint-disable */ 
    const value = binding.value

    // 将后端返回的权限列表从localStorage中取出（为一个数组）
    const projectId = window.localStorage.getItem("projectId");
    const { authCodes } = JSON.parse(window.localStorage.getItem("userInfor")) || {};
    const authCode = projectId && authCodes[projectId];

    // 判断权限列表是否包含传过来的值
    if (!authCode.includes(value)) {
      // 为防止用户F12查看元素修改display属性，此地方用删除元素的做法
      el.remove()
    }
  }
})
export default has

// main.js
import Has from './utils/has'
Vue.use(Has) // 挂载到vue中

// 页面中使用
v-has='123'

标签：vue,const,projectId,value,Vue,localStorage,按钮,封装
来源： https://www.cnblogs.com/demoTimes/p/15588790.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue封装按钮级全局指令