Vue笔记--通过自定义指令实现按钮操作权限
2024-09-04 00:31:40
经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记。
Vue实现的中后台管理系统。按钮操作权限的空置一般都是通过自定义指令Vue.directive。
<el-button v-has="fq-pms" type="primary">按钮</el-button>
通常我们会把从后台请求过来的数据存贮到Vuex或localStorage,接下来我们先注册一个全局自定义指令并监控它
Vue.directive('has',{
bind:function(el,binding){
const permissons = ['lcj'] //指令列表
if (has(binding.value, permissions)) {
el.parentNode.removeChild(el);//调用元素父级删除,有时候父元素未渲染出来可以把bind换成inserted
}
}
})
has函数
function has(value, permissions) {
let isExist = true;
if (permissions === undefined||permissions===null || permissions.length === 0) {
return true;
}
for (let i = 0; i < permissions.length; i++) {
if (permissions[i] === value) {
isExist = false;
break;
}
}
return isExist;
}
bind是Vue.directive的五个生命周期(钩子函数),按照生命周期 bind>inserted>update>componentUpdate>unbind
- bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
- inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)
- update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
- componentUpdate:指令所在组件的 VNode 及其子 VNode 全部更新后调用
- unbind:只调用一次,指令与元素解绑时调用
一般是通过操作权限是通过按钮的,菜单权限是通过前端路由和后台路由来判断的。下章会介绍Vue-router配置后台路由实现菜单权限的
最新文章
- Java/C++之 public、protected、private ; virtual &; abstract
- Java调优之jvm和线程的内存分析
- bzoj 3629 [JLOI2014]聪明的燕姿(约数和,搜索)
- Day 3 @ RSA Conference Asia Pacific & Japan 2016 (afternoon)
- yii自动登陆的验证机制浅析
- jsp if else c标签 总结
- 【转载】经典10道c/c++语言经典笔试题(含全部所有参考答案)
- 在FL2440上使用kei MDK 调试程序(J-link)
- angular中控制器之间的通讯方式
- [转帖]国产闪存颗粒终于熬出头 紫光存储S100固态硬盘评测
- 【bzoj 3669】[Noi2014]魔法森林
- 【工具相关】Web-Sublime Text2的用法(一)
- position属性absolute与relative 的区别
- Java基础94 分页查询(以MySQL数据库为例)
- supervisord 知识点
- Oracle Comment 获取并修改表或字段注释
- (转阮一峰)深入理解OAuth 2.0
- 网络性能测试工具iperf
- opencv实例二:缩放一张图片
- 软工之 NABCD 模型分析及 Web of Paper 原型设计结对作业
热门文章
- windows 下安装beego
- nmap的简单使用
- IDEA org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):
- Doxygen程序注释转换说明文档
- Phoenix核心功能原理及应用场景介绍以及Calcite 查询计划生成框架介绍
- tornado的IOLoop.instance()方法和IOLoop.current()方法区别
- YUM命令总结
- Git 在小团队中的管理流程
- itest(爱测试) 4.2.1 发布,开源BUG 跟踪管理 &; 敏捷测试管理软件
- acwing 23. 矩阵中的路径