位置: IT常识 - 正文
推荐整理分享vue3全局自定义指令实现按钮权限控制(vue3全局属性),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:vue自定义全局方法,vue3全局自定义指令自动获取input焦点,vue自定义全局方法,vue3定义全局变量,vue3定义全局变量,vue3全局自定义指令模块化,vue3全局自定义指令,vue3全局自定义指令,内容如对您有帮助,希望把文章链接给更多的朋友!
在Vue的模板语法中我们除了使用:v-show、v-for、v-model等,Vue其实 也允许我们来自定义自己的指令。
1)注意,在 Vue 中,代码复用和抽象的主要形式是组件。 2)然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
先看一下vue3官方文档介绍使用的自定义全局指令:
自定义全局指令:app的 directive 方法,可以在任意组件中被使用;
main.ts
其他页面使用v-focus这个指令
2. 参数解释el:指令所绑定的元素,可以直接操作DOM。binding:是一个对象,包含该指令的所有信息。binding.value,传递给指令的值,例如:<div v-permission="['add']",传递给permission指令的值就是['add'],我们可以拿到值做相关处理。3. 适用业务场景在很多后台管理系统中,常常需要针对某个页面的按钮进行权限控制。比如说,角色A用户拥有该页面的新增,编辑,删除权限;角色B用户拥有该页面编辑权限。那么对于角色B用户来说,该页面新增,删除按钮应该是不可见的。这就需要我们自定义指令来控制按钮的显示和隐藏。
4. 实现步骤1) 用户登录成功时,将用户权限数据,存入sessionStorage中
// login.vue<script setup lang='ts'> import { useStore } from '@/store' const store = useStore() const login = ()=>{ // 请求后台接口,拿到相关的用户权限数据 getUserPermissionApi().then(res=>{ sessionStorage.setItem('permission',res.data) // 示例: // 页面名称:按钮权限名 // ['auto.add','auto.delete','auto.update'] }).catch(err=>{ console.log('拿到用户权限内容报错了') }) }</script>2) 进行封装,项目根目录下新建一个directives文件夹 =》permission.ts和index.ts
// permission.ts// 引入vue中定义的指令对应的类型定义import { Directive } from 'vue'export const permission: Directive = { // mounted是指令的一个生命周期 mounted(el, binding) { // value 获取用户使用自定义指令绑定的内容 const { value } = binding // 获取用户所有的权限按钮 const permissionBtn = sessionStorage.getItem('permission') // 判断用户使用自定义指令,是否使用正确了 if (value && value instanceof Array && value.length > 0) { const permissionFunc = value //判断传递进来的按钮权限,用户是否拥有 //Array.some(), 数组中有一个结果是true返回true,剩下的元素不会再检测 const hasPermission = permissionBtn.some((role: any) => { return permissionFunc.includes(role) }) // 当用户没有这个按钮权限时,设置隐藏这个按钮 if (!hasPermission) { el.style.display = 'none' } } else { throw new Error('need roles! Like v-permission="[\'admin\',\'editor\']"') } }}// 注意,我们这里写的自定义指令,传递内容是一个数组,也就说,按钮权限可能是由// 多个因素决定的,如果你的业务场景只由一个因素决定,自定义指令也可以不传递一个数组,// 只传递一个字符串就可以了// index.tsexport * from './permission'3)main.ts中注册为全局指令
import App from './App.vue'import { createApp, Directive } from 'vue'import * as directives from '@/directives'const app = createApp(App)console.log(directives, 'directives') //打印发现是导出的自定义指令名,permissionObject.keys(directives).forEach(key => { //Object.keys() 返回一个数组,值是所有可遍历属性的key名 app.directive(key, (directives as { [key: string ]: Directive })[key]) //key是自定义指令名字;后面应该是自定义指令的值,值类型是string})4) 在页面中使用
<template> <button v-permission="['auto.add']">新增</button> <button v-permission="['auto.update']">编辑</button> <button v-permission="['auto.delete']">删除</button></template>这样,我们的全局自定义指令基本就实现按钮权限的控制了。
上一篇:Linux系统驱动跟裸机驱动的区别(linux驱动和windows驱动)
下一篇:Maven基础学习——tomcat插件配置(含web工程配置)(maven视频教程)
友情链接: 武汉网站建设