Vue中directives的用法
关于 vue 中 directives 的用法问题，详细可以参考vue官方对directives的解释
当前文章主要讲述directives怎么用，directives做权限按钮的功能
###1. directives 怎么用###
不错的示例，可以参考下，点击访问
directives 在生命周期内用
export default {
data() {
return {};
},
directives: {
"local-test": function(el, binding, vnode) {
/** el可以获取当前dom节点，并且进行编译，也可以操作事件 **/
/** binding指的是一个对象，一般不用 **/
/** vnode 是 Vue 编译生成的虚拟节点 **/
el.style.border = "1px solid red"; //操作style所有样式
console.log(el.value); //获取v-model的值
console.log(el.dataset.name); //data-name绑定的值，需要el.dataset来获取
console.log(vnode.context.$route); //获取当前路由信息
}
},
components: {},
filters: {},
watch: {}
};
###2. directives 做权限按钮的功能###
directives 在全局main.js中注册
路由配置：
path: '/permission',
component: Layout,
name: '权限测试',
meta: { btnPermissions: ['admin', 'supper', 'normal'] }, //页面需要的权限
children: [
{
path: 'supper',
component: _import('system/supper'),
name: '权限测试页',
meta: { btnPermissions: ['admin', 'supper'] } //页面需要的权限
},
{
path: 'normal',
component: _import('system/normal'),
name: '权限测试页',
meta: { btnPermissions: ['admin'] } //页面需要的权限
}
]
自定义指令：
import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {
bind: function (el, binding, vnode) {
// 获取按钮权限
let btnPermissions = vnode.context.$route.meta.btnPermissions.split(",");
if (!Vue.prototype.$_has(btnPermissions)) {
el.parentNode.removeChild(el);
}
}
});
// 权限检查方法
Vue.prototype.$_has = function (value) {
let isExist = false;
let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
return false;
}
if (value.indexOf(btnPermissionsStr) > -1) {
isExist = true;
}
return isExist;
};
export { has }
/*然后在main.js文件引入文件*/
import has from './public/js/btnPermissions.js';
/*页面中按钮只需加v-has即可*/
< el - button @click='editClick' type = "primary" v - has > 编辑</el - button >