Vue自定义v-has指令,做按钮权限判断的步骤

Vue⾃定义v-has指令,做按钮权限判断的步骤

⽬录

应⽤场景

简单说⼀下，⾃定义指令

基础概念

全局⾃定义

局部⾃定义

钩⼦函数

其他

原理

⾃定义指令v-has

utils⽂件下的index.js

main.js中引⼊

组件中使⽤v-has根据按钮权限，判断是否显⽰该按钮

应⽤场景

以后台管理系统为例，每个⽤户所拥有的按钮权限不⼀样。管理员配置权限之后，⽤户登录时，从接⼝拿到按钮权限列表，然后根据后台数据判断显⽰哪些按钮。

简单说⼀下，⾃定义指令

Vue.js官⽹关于⾃定义指令的讲解

基础概念

Vue除了核⼼功能默认内置的指令（v-model和v-show）还可以注册⾃定义指令。

在Vue2.0中，代码复⽤和抽象的主要形式是组件。但有的情况下，仍需要对普通DOM元素进⾏底层操作，这时候就会⽤到⾃定义指令。

譬如，⾃定义⼀个v-focus指令，当页⾯加载时，输⼊框将获得焦点

<input v-focus>

全局⾃定义

// 注册⼀个全局⾃定义指令 `v-focus`

Vue.directive('focus', {

// 当被绑定的元素插⼊到 DOM 中时……

inserted: function (el) {

// 聚焦元素

el.focus()

}

})

局部⾃定义

//如果想注册局部指令，组件中也接受⼀个 directives 的选项：

directives: {

focus: {

// 指令的定义

inserted: function (el) {

el.focus()

}

}

}

钩⼦函数

⼀个指令定义对象可以提供如下⼏个钩⼦函数（均为可选）

bind

只调⽤⼀次，指令第⼀次绑定到元素时调⽤。在这⾥可以进⾏⼀次性的初始化设置。

inserted

被绑定元素插⼊⽗节点时调⽤（仅保证⽗节点存在，但不⼀定已被插⼊⽂档中）

update

所在组件的VNode更新时调⽤，但是可能发⽣在其⼦VNode更新之前。指令的值可能发⽣了改变，也可能没有。但是你可以通过⽐较更新前后的值来忽略不必要的模板更新。

componentUpdated

指令所在组件的VNode及其⼦VNode全部更新后调⽤。

unbind

只调⽤⼀次，指令与元素解绑时调⽤。

其他

除此之外，还有⼀些基础概念，钩⼦函数参数，动态指令参数，等等。

官⽹讲的⼗分清楚，在此不再多做赘述。

原理

如果对⾃定义指令的源码感兴趣，也有⼀篇⽂章讲的很通透

原理就是：

解析Vue的属性的时候，遍历每个属性；

对象上增加⼀个directives属性保存指令信息；

渲染完成后会执⾏directives模块的create钩⼦函数；

Vue 编译⽣成的虚拟节点，也就是VNode插⼊到⽗节点后，

依次执⾏每个函数，也就执⾏到我们⾃定义定义的inserted钩⼦函数了

⾃定义指令v-has

话休絮烦，⾔归正传。

今天主要是总结⼀下：⾃定义指令v-has，按钮权限判断

登录接⼝拿到按钮权限列表，存⼊本地缓存LOGIN_USER_BUTTON_AUTH中

数据格式如下：

[

{

"checked":false,

"component":"",

"createTime":"2019-06-29 18:21:06",

"createUser":"026a564bbfd84861ac4b65393644beef",

"icon":"",

"id":"1503273153861066776",

"name":"今⽇采集（案卷）",

"open":"true",

"parentId":"2328050996633395469",

"parentName":"⾸页",

"permission":"sys:index:vol",

"sort":103,

"status":"0",

"type":"2",

"updateTime":"2021-01-27 15:51:15",

"updateUser":"026a564bbfd84861ac4b65393644beef",

"url":""

}

]

⾃定义v-has指令的配置

在utils⽂件夹下，新建hasPermission.js⽂件，在index.js中统⼀导出

const hasPermission = {

install (Vue, options) {

Vue.directive('has', {

inserted: (el, binding, vnode)=>{

filterGlobalPermission(el, binding, vnode);

}

});

}

};

/**

* 全局权限控制

*/

export const filterGlobalPermission = (el, binding, vnode) => {

let permissionList = [];

let authList = JSON.parse(localStorage.getItem('LOGIN_USER_BUTTON_AUTH') || "[]");

for (let auth of authList) {

permissionList.push(auth);

}

if (!permissionList.length) {

el.parentNode.removeChild(el);

return;

}

let permissions = [];

for (let item of permissionList) {

permissions.push(item.permission);

}

if (!permissions.includes(binding.value)) {

el.parentNode.removeChild(el);

}

}

export default hasPermission;

utils⽂件下的index.js

utils⽂件夹下的其他js⽂件也可以统⼀在index.js⾥导出

import hasPermission from './hasPermission'

export { hasPermission }

main.js中引⼊

import { hasPermission } from '@/utils'

e(hasPermission)

组件中使⽤v-has根据按钮权限，判断是否显⽰该按钮

<el-button v-has="'sys:arch:add'" type="primary" size="mini" icon="el-icon-plus" @click="add('1')">

新增

</el-button>

以上就是Vue⾃定义v-has指令,做按钮权限判断的步骤的详细内容，更多关于Vue ⾃定义v-has指令的资料请关注其它相关⽂章！