vue自定义指令（directive ）并传参

使用场景：项目中的权限控制

• 自定义指令 index.js

import store from '@/store'
/**
 * 权限指令
 * @param {*} el 当前dom对象
 * @param {*} binding 指令参数
 * 
 * 指令使用 v-permissions="'code'"
 *  其中 code 为传的参数
 *  在指令中通过 binding.value 接收传递的参数
 */
function permissions(el, binding) {
  // 获取用户的权限码
  // 例如:['code','code1','code2','code3']
  let permissionsList = store.state.user.permissionsList
  // 获取参数
  let code= binding.value
  // 如果没有参数，不作操作
  if (!code) return
  // 判断用户是否有权限，如果有，不做任何操作，如果没有，则将当前元素删除
  if (!permissionsList.includes(code))) {
    el.remove();
    // el.style.display='none'
  }
}
export default {
// 将方法抛出去
  permissions
}

• mian.js

// 注册全局指令
import Vue from 'vue'
// 引入 directive-index.js文件
import directive from '@/directive/index'

// 在mian.js中加入此代码
Object.keys(directive).forEach(key => {
  Vue.directive(key, directive[key])
})

• 指令使用组件 index.vue

// 指令的使用
<template>
	<div>
		<div v-permissions="'code'"></div>
	</div>
</template>

打赏请扫码！！