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>

巴特西

Vue中directives的用法

最新文章

热门文章