vue中directives的用法

vue中directives的用法

• directives的用法和directives做权限按钮的功能

1. 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>