vue项目中按钮权限控制之自定义指令
vue项目中,有的情况下,你需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。这里我们自定义一个按钮权限控制的指令import Vue from 'vue'import store from '@/store'/**权限指令**/Vue.directive('has', {bind: function (el, binding) {if (!Vue.pro...
·
vue项目中,有的情况下,你需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
这里我们自定义一个按钮权限控制的指令
import Vue from 'vue'
import store from '@/store'
/**权限指令**/
Vue.directive('has', {
bind: function (el, binding) {
if (!Vue.prototype.$_has(binding.value)) {
// el.parentNode.removeChild(el);
el.style.display = 'none';
}
}
});
//权限检查方法
Vue.prototype.$_has = function (value) {
let isExist = false;
let buttonperms = store.state.user_info.btns
// 权限列表
for (let i = 0; i < buttonperms.length; i++) {
if (buttonperms[i].indexOf(value) > -1) {
isExist = true;
break;
}
}
return isExist;
};
然后在全局引入
用的时候在按钮上添加v-has属性,并添加属性值(已经定义好的权限标识),与返回权限标识做比较即可。
更多推荐
已为社区贡献3条内容
所有评论(0)