VUE.directive

2.6 自定义指令
自定义全局和局部的自定义指令
注意： Vue中所有的指令，在调用的时候，都以 v- 开头 ，但是自定义时不需要v-开头

2.6.1 全局自定义指令
使用Vue.directive()定义全局的指令 v-focus
其中：参数1 ： 指令的名称；参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作

 Vue.directive('focus', {
      bind: function (el) { 
    // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
    // 注意： 在每个函数中，第一个参数，永远是 el ，表示被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
    // 在元素刚绑定了指令的时候，还没有插入到 DOM中去，这时候，调用 focus 方法没有作用
    //因为，一个元素，只有插入DOM之后，才能获取焦点
    //没有插入到 DOM中去还在内存中
    // 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
        // el.focus()
      },
      inserted: function (el) {  
      // inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
      // 已经插入到dom中去了
        el.focus()
        // 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
      },
      updated: function (el) {  // 当VNode更新的时候，会执行 updated， 可能会触发多次

      }
    })

注意：对于bind和inserted可以这样理解：bind可以认为是绑内存，inserted可以认为是插入dom
updated也是操作于dom页面，但是与inserted相比是可以触发多次

2.6.2 私有自定义指令
自定义私有指令

// 如何自定义一个私有的过滤器（局部）
    var vm2 = new Vue({
      el: '#app2',
      data: {
        dt: new Date()
      },
      methods: {},//自定义方法
      filters: {},//自定义过滤器
      directives: { // 自定义私有指令
        'fontweight': { // 设置字体粗细的
          bind: function (el, binding) {
            el.style.fontWeight = binding.value
          }
        },
        'fontsize': function (el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
          el.style.fontSize = parseInt(binding.value) + 'px'
        }
      }
    })

2.6.3 自定义指令参数
在回调函数中

第一参数el是指令所绑定的元素，可以直接操作dom
第二个参数binding一个对象，包含以下属性：
name:指令名，不包括v- 前缀
value:指令的绑定值，例如：v-mydirective=“1+1”，那么value的值是2
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的表达式或变量名。 例如 v-my-directive=“1 + 1” ， expression 的值是 “1 + 1”。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 foo
modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }

第三个参数vnode: Vue 编译生成的虚拟节点
第三个参数oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

Vue.directive('color', {
bind: function (el, binding) {
   el.style.color = binding.value
  }
})

2.6.4 指令函数简写形式
无论是全局还是私有的都可以都可以适用如下的简写形式。
大多数情况下，我们可能想在bind和update钩子上做重复动作，并且不想关心其他的钩子函数，可以写成如下形式

Vue.directive('color-switch',function(el,binding){
	el.style.backgroundColor = binding.value;
});

注意：只能适用于bind和update的形式

原文链接：https://blog.csdn.net/u012060033/article/details/109106826

// crm 系统按钮权限

directive\permission\index.js

import hasRole from './hasRole'
import hasPermi from './hasPermi'

const install = function(Vue) {
  Vue.directive('hasRole', hasRole)
  Vue.directive('hasPermi', hasPermi)
}

if (window.Vue) {
  window['hasRole'] = hasRole
  window['hasPermi'] = hasPermi
  Vue.use(install); // eslint-disable-line
}

export default install

directive\permission\hasPermi.js

 /**
 * 操作权限处理
 * Copyright (c) 2020 sumec
 */
 
import store from '@/store'

export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const all_permission = "*:*:*";
    const permissions = store.getters && store.getters.permissions

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value

      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
}

directive\permission\hasRole.js

 /**
 * 角色权限处理
 * Copyright (c) 2020 sumec
 */

import store from '@/store'

export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const super_admin = "sys:manager";
    const roles = store.getters && store.getters.roleSet

    if (value && value instanceof Array && value.length > 0) {
      const roleFlag = value

      const hasRole = roles.some(role => {
        return super_admin === role || roleFlag.includes(role)
      })

      if (!hasRole) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置角色权限标签值"`)
    }
  }
}

utils\permissions.js

import store from '@/store'

/**
 * 字符权限校验
 * @param {Array} value 校验值
 * @returns {Boolean}
 */
export function checkPermi(value) {
  if (value && value instanceof Array && value.length > 0) {
    const permissions = store.getters && store.getters.permissions
    const permissionDatas = value

    const hasPermission = permissions.some(permission => {
      return permissionDatas.includes(permission)
    })

    if (!hasPermission) {
      return false
    }
    return true
  } else {
    console.error(`need roles! Like checkPermi="['system:user:add','system:user:edit']"`)
    return false
  }
}

/**
 * 角色权限校验
 * @param {Array} value 校验值
 * @returns {Boolean}
 */
export function checkRole(value) {
  if (value && value instanceof Array && value.length > 0) {
    const roles = store.getters && store.getters.roleSet
    const permissionRoles = value

    const hasRole = roles.some(role => {
      return permissionRoles.includes(role)
    })

    if (!hasRole) {
      return false
    }
    return true
  } else {
    console.error(`need roles! Like checkRole="['admin','editor']"`)
    return false
  }
}

store\index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)
const store = new Vuex.Store({
  getters,
})
export default store

store\getters.js

import { getInfo} from '@/api/login'
const getters = {
	    roleSet: state => state.user.roleSet,
  		permissions: state => state.user.permissions,
}
export default getters

store\user.js

  const user = { 
     state: {
		roleSet: [],
	    permissions: [],
	},
	mutations:	{
		 SET_ROLES: (state, roles) => {
	      state.roleSet = roles
	    },
	    SET_PERMISSIONS: (state, permissions) => {
	      state.permissions = permissions
	    },
	},
	actions: {
		    // 获取用户信息
    GetInfo({ commit, state }) {
		      return new Promise((resolve, reject) => {
		        getInfo(state.token).then(res => {
		          const user = res.user
		          if (user.userAvatar == '' || user.userAvatar== null || user.userAvatar ==undefined){
		            if (user.userSex == '1'){
		              commit('SET_AVATAR',require("@/assets/img/womenHead.png"))
		            }else {
		              commit('SET_AVATAR',require("@/assets/img/manHead.png"))
		            }
		          }else {
		            commit('SET_AVATAR',process.env.VUE_APP_BASE_API+'/attach/i/' + user.userAvatar)
		          }
		
		          // const avatar = user.userAvatar == "" ? (user.userSex=='1'? require("@/assets/img/womenHead.png"):require("@/assets/img/manHead.png")) : process.env.VUE_APP_BASE_API+'/attach/i/' + user.userAvatar;
		          // const avatar = user.userAvatar == "" ? require("@/assets/image/login.png") : that.$store.state.user.avatar;
		          if (res.roleSet && res.roleSet.length > 0) { // 验证返回的roles是否是一个非空数组
		            commit('SET_ROLES', res.roleSet)
		            commit('SET_PERMISSIONS', res.permissions)
		          } else {
		            commit('SET_ROLES', ['ROLE_DEFAULT'])
		          }
		          commit('SET_NAME', user.userName)
		          commit('SET_FULLNAME', user.fullName)
		          // commit('SET_AVATAR', avatar)
		          commit('SET_USERID',user.userId)
		          // console.log("123",avatar)
		          commit('SET_PWDFLAG',res.pwdFlag)
		          commit('SET_MESSAGENUM',res.messageNum)
		          resolve(res)
		        }).catch(error => {
		          reject(error)
		        })
		      })
		    },
	}
}

api\login.js

import request from '@/utils/request'
// 获取用户详细信息
export function getInfo() {
  return request({
    url: '/getInfo',
    method: 'get'
  })
}

<el-button @click="reply" class="btnTwo btnSimple" v-if="replyFlag == 1" v-hasRole="['ORGAN:leader','TRADE:admin']" > 审核 </el-button>