您现在的位置是:网站首页> 编程资料编程资料

vue使用自定义指令来控制页面按钮组的权限思想_vue.js_

2023-05-24 322人已围观

简介 vue使用自定义指令来控制页面按钮组的权限思想_vue.js_

自定义指令来控制页面按钮组的权限思想

在vuejs中, 我们可以自定义一些指令,来控制一些按钮加载之前的动作, 比如现有的 v-if 或者 v-show

这些功能是我们可以手写的, 现在们来做一个初级的页面级的权限控制的例子

vue自定义指令

上面的代码, 主要要注意 自定义指令的参数, 都可以获得什么有用的数据。

vue添加按钮权限~通过自定义指令

1、需求

客户:需要把导入、删除权限化;指定人员有权限;

2、思路

后台有一个接口,是可以查询到当前登录人的权限;

前端方案:

1.每到一个页面就请求一次接口是否有权限;(太麻烦了)

2.自定义指令 · Vue.directive;(一次请求,一直用)

3、代码实现

1.自定义指令

创建 /directive/permission/hasPermi 文件

//用来获取权限数据 import store from '@/store'   export default {     inserted(el, binding, vnode) {     //获取绑定值     const { value } = binding     // TODO 匹配规则,在页面写的要对应这个匹配规则     const all_permission = "*:*:*";     //获取用户权限数据     const permissions = store.getters && store.getters.permissions  if (value && value instanceof Array && value.length > 0) {        //权限标志       const permissionFlag = value       //判断用户是否有此权限       const hasPermissions = permissions.some(permission => {         console.log('permission', permission);   return all_permission === permission || permissionFlag.includes(permission)       })              //没有权限-移除页面上的控件       if (!hasPermissions) {{         console.log('没有权限-移除');         el.parentNode && el.parentNode.removeChild(el)       }     } else {        el.parentNode && el.parentNode.removeChild(el)       throw new Error(`请设置数组操作权限`)     }   } }

2.注册指令

创建 /directive/permission/index文件

import hasPermi from './hasPermi' import Vue from "vue"     const install = function (Vue) {   Vue.directive('hasPermi', hasPermi) }     if (window.Vue) {   window['hasPermi'] = hasPermi   Vue.use(install); }   export default install

3.在main.js里面进行全局注册 

import permission from './directive/permission'     Vue.use(permission)

vue官网对指令的解释

https://cn.vuejs.org/v2/guide/custom-directive.html

4.使用方法

      

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。 

-六神源码网