调研园区网站建设工作,wordpress 专题,经典小型建筑设计案例,百度权重查询入口目录 前言#xff1a;
自定义指令介绍#xff1a;
局部的自定义指令#xff1a;
全局自定义指令#xff1a;
讲讲后台管理权限管理#xff1a; 前言#xff1a; 说起这个自定义指令的使用场景#xff0c;我第一反应就是#xff0c;后台管理的权限管理#xff0c;要…目录 前言
自定义指令介绍
局部的自定义指令
全局自定义指令
讲讲后台管理权限管理 前言 说起这个自定义指令的使用场景我第一反应就是后台管理的权限管理要问我为什么就是ruoyi系统用多了本篇就聊聊vue3的自定义指令以及若依的管理权限封装。 如果对vue指令还是有点懵不清楚这是vue哪一块的知识v-if,v-show,v-for总用过吧没错指令说的就是它们这些都是vue内置的指令同时vue还允许我们注册一些自定义的指令。
自定义指令介绍 既然作为指令当然有它的一些规则那么指令的规则就是以v字母开头的驼峰变量当然这是在script setup中可以这么写。在没有使用script setup的情况下则是另外一种写法我会一一进行举例介绍。
借用vue官网的介绍一个指令的定义对象可以提供几种钩子函数 (都是可选的)
const myDirective {// 在绑定元素的 attribute 前// 或事件监听器应用前调用created(el, binding, vnode, prevVnode) {// 下面会介绍各个参数的细节},// 在元素被插入到 DOM 前调用beforeMount(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted(el, binding, vnode, prevVnode) {},// 绑定元素的父组件更新前调用beforeUpdate(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用updated(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载前调用beforeUnmount(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载后调用unmounted(el, binding, vnode, prevVnode) {}
}指令的钩子会传递以下几种参数 el指令绑定到的元素。这可以用于直接操作 DOM。 binding一个对象包含以下属性。 value传递给指令的值。例如在 v-my-directive1 1 中值是 2。oldValue之前的值仅在 beforeUpdate 和 updated 中可用。无论值是否更改它都可用。arg传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中参数是 foo。modifiers一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中修饰符对象是 { foo: true, bar: true }。instance使用该指令的组件实例。dir指令的定义对象。 vnode代表绑定元素的底层 VNode。 prevNode之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。 局部的自定义指令
举个例子想要为元素设置样式。
templatediv v-styleJay丶萧邦/div
/templatescript setupconst vStyle (el, binding, vnode, prevNode) {console.log(el, el);console.log(binding, binding);console.log(vnode, vnode);console.log(prevNode, prevNode);}
/script看看都打印的是什么 这里的打印值结合上面的说明就能明白各个值所代表的的意义了。下面我们写成这样
div v-stylecolor:#ff0000;font-size:30pxJay丶萧邦/div
控制的binding将会长这个样子很显然value是我们传递的值接下来的工作就是如何把我们传递的value值给当前div回头一看el不就是我们的当前绑定的元素吗 于是 const vStyle (el, binding, vnode, prevNode) {console.log(el, el);console.log(binding, binding);console.log(vnode, vnode);console.log(prevNode, prevNode);el.style binding.value} 未采用 script setup 的情况需要使用directives进行注册指令方可 export default {setup() {},directives: {// 写在模板上就是v-stylestyle: {mounted(el, binding) {console.log(el, binding);el.style binding.value}}}}
全局自定义指令
说到全局自定义指令第一反应当然是去main.js里面动手脚啊。
所以找到我们的main.js,如下方式 如此便是好了是不是很简单。。。
其实这只是自定义指令最基本的一个用法里面还有挺多的东西没有列出来比如arg参数修饰对象等等不是我不列关键是我工作的时候也没用过啊
讲讲后台管理权限管理
说起来后台管理这块无外乎列表按钮表单外加一些统计图。重点在于如何让不同角色的用户登录系统之后只展示他可以操作的内容举个最简单的例子-用户管理页面。 大概构成为顶部搜索框中间是一些操作按钮比如添加用户删除用户修改用户等等主体那就是用户表格展示用户的信息。我们的重点就放在操作按钮上 1.基础条件-用户信息存放处
我使用了pinia不知道pinia怎么使用的去这里pinia安装配置当前登录用户的信息存放在user.js中当前登录人的name是Jay丶萧邦拥有添加用户和修改用户的权限当然这些信息肯定是从后台服务器请求拿来的。 import {defineStore} from pinia;const userStore defineStore(userStore, {state: () ({name: Jay丶萧邦,/* 添加用户system:user:add修改用户system:user:edit删除用户system:user:delete导出用户system:user:export*/permissions: [system:user:add, system:user:edit]})
})export default userStore;2.基础条件-操作按钮 el-row classmb-4el-button typeprimary plain添加用户/el-buttonel-button typesuccess plain导出用户/el-buttonel-button typeinfo plain修改用户/el-buttonel-button typewarning plain删除用户/el-button/el-row
2.在你不使用自定义指令的情况下你该如何去判断哪些操作按钮显示或不显示首先想到最直接的方式可能是下面这种
templateel-row classmb-4el-button typeprimary plain v-ifpermissions.includes(system:user:add)添加用户/el-buttonel-button typesuccess plain v-ifpermissions.includes(system:user:export)导出用户/el-buttonel-button typeinfo plain v-ifpermissions.includes(system:user:edit)修改用户/el-buttonel-button typewarning plain v-ifpermissions.includes(system:user:delete)删除用户/el-button/el-row
/templatescript setupimport userStore from /store/modules/user.jsconst permissions userStore().permissions
/script确实能实现没有毛病缺点就是每个文件都需要这样写还有点长扩展性也不是很好。如今有了自定义指令该怎么写呢
3.自定义指令v-hasPermi
首先先建这么几个目录文件directive下的index.js代表我们自定义指令的总入口。
permissions下的index.js代表我们为权限管理这块写的自定义指令。 permissions/index.js
import userStore from /store/modules/user.jsconst hasPermi (el, binding) {const permissions userStore().permissionsconsole.log(el, binding);
}export default hasPermi;
directive/index.js
import hasPermi from ./permissions/index.jsfunction directive(app) {app.directive(hasPermi, hasPermi)
}export default directive;
main.js index.vue
el-button typeprimary plain v-hasPermi[system:user:add]添加用户/el-button
缓一缓看看这些内容能不能看个明白看看打印值 说明我们已经通过自定义指令v-hasPermi将值传递进来了接下来就是拿当前用户的permissions与此值进行比较之所以写成一个数组是为了更好的扩展性。
接下来先把操作按钮的权限补充完成 el-row classmb-4el-button typeprimary plain v-hasPermi[system:user:add]添加用户/el-buttonel-button typesuccess plain v-hasPermi[system:user:export]导出用户/el-buttonel-button typeinfo plain v-hasPermi[system:user:edit]修改用户/el-buttonel-button typewarning plain v-hasPermi[system:user:delete]删除用户/el-button/el-row
再补充点判断条件permissions/index.js
import userStore from /store/modules/user.jsconst hasPermi (el, binding) {const {value} binding;const ALL_PERMISSION *:*:*;const permissions userStore().permissions;if (value value instanceof Array value.length 0) {const hasPermission permissions.some(permission {return ALL_PERMISSION permission || value.includes(permission)})console.log(hasPermission);if (!hasPermission) {console.log(el)}} else {throw new Error(请填写当前操作权限值)}
}export default hasPermi; 可以看到经过一系列的判断我们已经找到了有哪两个按钮是不用显示的那就好办了如何让它们不显示。有人会直接上css我只能说是有点东西哈哈哈0.o! if (!hasPermission) {console.log(el)el.style.display none} 那么我这里选择的方式是把此元素删除掉 if (!hasPermission) {console.log(el)el.remove()} ok又是水文的一天
