vue中自定义组件“ directives “的常用功能

directives 可以全局使用以及组件内部定义使用

1. directives是什么？
   注册自定义的指令
2. directives有什么作用？
   对普通 DOM 元素进行底层操作，就会用到自定义指令
3. directives怎么使用？
   .vue页面的使用

<template>
  <div>
    <button v-btn="txt" :data-msg="imgurl">{{ btntext }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btntext: "测试",
      txt: "123",
      imgurl: "imgurl",
    };
  },
}
</script>

// 注册全局自定义指令 'v-btn'
Vue.directive('btn',{
    //一般用于初始化数据
    bind:function(el, binding, vnode)=>{}
    //当被绑定元素插入到DOM中时...
    insert:function(el,binding,vnode){
    //此时 ‘el’指的是当前节点对象  <button data-vnode="imgurl" style="color: red;">测试</button>
    el.style.cssText="color:red;" ==> 字体变为红色
    //binding 指一个对象包含以下  /** binding指的是一个对象，一般不用 **/
    // {
    // name     :指令命 ==> 'btn'
    // value    :指绑定值  ==> 123
    // oldValue ...
    // expression :字符串形式的指令表达式 ==>'txt'
    // arg        :传给指令的参数 列如:v-my-directive:foo中，参数为"foo"
    // modifiers   :一个包含修饰符的对象。例如: v-my-directive. foo.bar中，修饰符对象为{ foo: true, bar: true }。
    // vnode       :Vue编译生成的虚拟节点
    // oldVnode    :上一个虚拟节点 
    // }
      // 获取data-的值
      // el.dataset.msg ==> 'imgurl'
      // 获取当前路由信息
      // vnode.context.$route;
	}
})

directives 做权限按钮的功能

• 路由配置 例如

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>