vue自定义指令控制角色权限

需求

在做pc项目时，需要根据角色的不同，控制一些页面的按钮及内容显示，像pc端的管理员和普通用户权限是不一样的

封装指令

新建permission.js文件

import Vue from 'vue'
Vue.directive('has',{bind : function(el,binding){//需要在DOM更新完成以后再执行以下代码，不然通过 el.parentNode 获取不到父节点，因为此时还没有绑定到Vue.nextTick(function(){var role = binding.value.roleif(!Vue.prototype.$_has(role)){el.parentNode.removeChild(el);}})}
})Vue.prototype.$_has = function(role){//当前角色可以从cookie中获取var currentRole = ['editor'] //测试数据//var currentRole = localstorage.getItem('currentRole ')  //真实获取当前角色if(Array.isArray(role)){return currentRole.some(function(ele){return role.indexOf(ele) >= 0})}else{return currentRole.indexOf(role) >= 0;}
}

在main.js文件挂载自定义指令

import has from '@/utils/permission'

页面应用自定义指令

 <van-button round block type="info" v-has="{role:['editor','admin']}">有权限</van-button><van-button round block type="info">无权限</van-button>

vue自定义指令控制角色权限相关推荐

Vue 进阶系列丨自定义指令实现按钮权限功能
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
vuejs 指令封装 button 加载效果_这些Vue自定义指令，让你的项目开发爽到爆
受 AngularJS 的启发,Vue 内置了一些非常有用的指令(比如v-html 和 v-once等),每个指令都有自身的用途.完整的指令列表可以在这里查看. 这还没完,更棒的是可以开发自定义指令. ...
超实用：Vue 自定义指令合集
大家好,我是漫步前面我已经分享过一篇"分享8个非常实用的Vue自定义指令"文章,里面教了大家如何使用自定义指令,以及几个使用的指令,下面这篇文章也是类似内容,希望你会喜欢.记得查 ...
15个Vue自定义指令，让你的项目开发爽到爆
这15个Vue自定义指令,让你的项目开发爽到爆李中凯老师,8年前端开发,前端负责人,擅长JavaScript/Vue. 受 AngularJS 的启发,Vue 内置了一些非常有用的指令(比如v-ht ...
vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子 ...
vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
pyqt5 treeview鼠标右键菜单事件_【动手实践】使用 Vue 自定义指令实现右键菜单...
本文来自于神奇的程序员前言浏览器里右键时会有一个默认的菜单,在我的开源项目中正好有自定义右键菜单的需求,在npm库找了下与之相关的包,发现都是以组件形式实现的,感觉那种做法太过繁琐. 于是,我就 ...
html标签outclick,vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: 一般在需要 DOM 操作时我们都需要使用自定义指令的方式去实现,当然一些特殊的事件监听也可以使用指令,例 ...

vue自定义指令控制角色权限

需求

封装指令

在main.js文件挂载自定义指令

页面应用自定义指令

vue自定义指令控制角色权限相关推荐

最新文章

热门文章