自定义指令定义
v-show :Vue 的内置指令,通过这个指令能展示和隐藏节点 (Vue底层控制了该节点的 display 属性)
自定义指令:在构建项目过程中,虽然我们都是使用的组件形式,但是在某些情况下,我们仍然需要对普通DOM元素进行底层操作,这个时候就会用到自定义指令。
自定义指令既可以像 v-show 一样,不搭配属性值,也可以像 v-text配置属性值来实现特殊效果
1. 在自定义指令文件中编写以下代码
```javascript
//这里由于后台返回的button数组存放在仓库中,所以这里需要引入pinia
import pinia from "@/store";
import userstore from "@/store/modules/user.ts";
let UserStore = userstore(pinia);
export const isHasButton = (app: any) => {
// 全局自定义指令,实现按钮权限
app.directive("has", {
// 代表使用这个全局自定义指令挂载完毕的时候会执行一次
mounted(el: any, options: any) {
//自定义指令右侧的数值:如果在用户信息buttons数组当中没有,直接从Dom树上干掉
if (!UserStore.buttons.includes(options.value)) {
// dom的原生方法
el.parentNode.removeChild(el);
}
},
});
};
- 首先在main.js中引用并使用所存放自定义指令的文件
/ 引入自定义指令
import { isHasButton } from "@/directive/has";
isHasButton(app);
- 最后在需要使用按钮权限的地方直接使用即可
//btn.Role.add 这是后台返回的按钮名称,由于在main.js中已经全局注册isHasButton ,所以可以直接使用
<el-button
type="primary"
size="default"
icon="Plus"
@click="AddroleBtn"
v-has="`btn.Role.add`"
>添加角色</el-button
>