Vue3：自定义指令以及简单的后台管理权限封装

目录

前言：

自定义指令介绍：

局部的自定义指令：

全局自定义指令：

讲讲后台管理权限管理：

---

前言：

        说起这个自定义指令的使用场景，我第一反应就是，后台管理的权限管理，要问我为什么？就是ruoyi系统用多了；本篇就聊聊vue3的自定义指令以及若依的管理权限封装。

        如果对vue指令还是有点懵，不清楚这是vue哪一块的知识，v-if,v-show,v-for总用过吧？没错，指令说的就是它们，这些都是vue内置的指令，同时vue还允许我们注册一些自定义的指令。

自定义指令介绍：

        既然作为指令，当然有它的一些规则，那么指令的规则就是以v字母开头的驼峰变量，当然这是在

 看看都打印的是什么？

 这里的打印值结合上面的说明，就能明白各个值所代表的的意义了。下面我们写成这样

Jay丶萧邦

控制的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
	}

未采用 

确实能实现，没有毛病，缺点就是每个文件都需要这样写，还有点长，扩展性也不是很好。如今有了自定义指令该怎么写呢？

3.自定义指令v-hasPermi

首先先建这么几个目录文件，directive下的index.js代表我们自定义指令的总入口。

permissions下的index.js代表我们为权限管理这块写的自定义指令。

permissions/index.js

import userStore from "@/store/modules/user.js"

const hasPermi = (el, binding) => {
	const permissions = userStore().permissions
	console.log(el, binding);
}

export default hasPermi;

directive/index.js 

import hasPermi from "./permissions/index.js"

function directive(app) {
	app.directive('hasPermi', hasPermi)
}

export default directive;

main.js

index.vue

添加用户

缓一缓，看看这些内容能不能看个明白，看看打印值：

说明我们已经通过自定义指令v-hasPermi将值传递进来了，接下来就是拿当前用户的permissions与此值进行比较，之所以写成一个数组，是为了更好的扩展性。

接下来先把操作按钮的权限补充完成

	
		添加用户
		导出用户
		修改用户
		删除用户
	

再补充点判断条件，permissions/index.js

import userStore from "@/store/modules/user.js"

const 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，又是水文的一天！