vue3.0项目实战系列文章 - 自定义指令（按钮权限+防止重复提交）

 我是个没有感情的代码机器。近期有弃文情绪，写的冷冰冰的，看不懂私聊。

目录

前提 

文件一判断是否有按钮级权限（按钮级不只是按钮哦）

文件二 自定义指令-vue3版

文件三 引用自定义指令

文件四使用 v-permission

文件五使用 v-repeat

前提 

1. 按钮权限控制
2. 表单防止重复提交指令

文件一判断是否有按钮级权限（按钮级不只是按钮哦）

utils>>index.js 

• 注意分隔符
• & 或 | 来进行条件判断

/**
 * @description: 判断是否有按钮级权限
 * @param {String} permission 多个使用 & 或 | 分隔开
 * @param {String} separator 分隔符：&-并且 |-或者
 * @return {*}
 * @author: gumingchen
 */
 export function havePermission(permission, separator = '&') {
  let result = false
  const permissions = permission.split(separator)
  let fn = ''
  switch (separator) {
    case '&':
      fn = 'every'
      break
    case '|':
      fn = 'some'
      break
  }
  const list = JSON.parse(localStorage.getItem('buttonList')) || [];
  result = fn && permissions[fn](item => {
    return list.indexOf(item) !== -1
  })
  return result
}

文件二 自定义指令-vue3版

vue2版本与vue3写法略有不同，见下方

directive>>index.js

• havePermission(permission)   通过数据查找判断此按钮是否展示
• switch  如果不需要的话此判断可以参考下发vue2

vue3 

import { nextTick } from 'vue'
import { havePermission } from '@/utils'

export default {
  install: function (app) {
    /**
     * @description: 权限控制指令
     * @param {*}
     * @return {*}
     * @author: gumingchen
     */
    app.directive('permission', {
      mounted: (el, binding, vnode) => {
        const permission = binding.value
        const result = havePermission(permission)
        const tagName = el.localName
        if (!result) {
          switch (tagName) {
            case 'button': // 按钮权限控制-删除tag
              el.remove()
              break
            case 'div': // element-plus switch 组件权限控制
              if (vnode.props && vnode.props.class && vnode.props.class.includes('el-switch')) {
                nextTick(() => {
                  el.className += ' is-disabled' // 设置禁用样式
                  const tag = el.cloneNode(true) // 深拷贝节点以解除绑定事件
                  const parent = el.parentNode
                  el.remove()
                  parent.append(tag)
                })
              }
              break
          }
        }
      }
    })

    /**
     * @description: 表单防止重复提交指令
     * @param {*}
     * @return {*}
     * @author: gumingchen
     */
    app.directive('repeat', {
      mounted(el, binding) {
        el.addEventListener('click', () => {
          if (!el.disabled) {
            el.disabled = true
            setTimeout(() => {
              el.disabled = false
            }, binding.value || 2000)
          }
        })
      }
    })
  }
}

vue2

import Vue from 'vue';
import { havePermission } from '@/utils'

// 检测是否有权限
// 使用Vue.directive声明自定义指令permission
Vue.directive('permission', {
  inserted(el, binding, vnode) {
    // console.log(el.localName, binding, vnode)
    const permission = binding.value
    const result = havePermission(permission)
    const tagName = el.localName
    if (!result) {
      // switch (tagName) { 
      //   case 'button': // 按钮权限控制-删除tag
      //     el.remove()
      //     break
      //   case 'div':
      //     el.remove()
      //     break
      //   case 'span':
      //     el.remove()
      //     break
      //     case 'img':
      //       el.remove()
      //       break
      // }
      el.remove()
    }
  }
})
/**
 * @description: 表单防止重复提交指令
 * @param {*}
 * @return {*}
 * @author: gumingchen
 */
Vue.directive('repeat', {
  mounted(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 2000)
      }
    })
  }
})

文件三 引用自定义指令

 main.js

• 引入自定义指令后需要绑定到app中

import Directive from '@/directive' // 自定义指令

const app = createApp(App)

app.use(Directive)
  .mount('#app')

文件四使用 v-permission

• havePermission('dictionarySub:create|dictionarySub:delete', '|')"   用于整体判断是否展示
• v-permission="'dictionarySub:create'"   用于整体按钮、标签是否展示

<template #header v-if="havePermission('dictionarySub:create|dictionarySub:delete', '|')">
      <el-form :inline="true">
        <el-form-item>
          <el-button
            v-permission="'dictionarySub:create'"
            type="primary"
            @click="addEditHandle()"
            :disabled="!active">新增</el-button>
          <el-button
            v-permission="'dictionarySub:delete'"
            type="danger"
            :disabled="selection.length <= 0 || !active"
            @click="deleteHandle()">批量删除</el-button>
        </el-form-item>
      </el-form>
</template>

import { havePermission } from '@/utils'

文件五使用 v-repeat

• 防止重复提交导致接口报错

<el-button v-repeat @click="reacquireHandle()">搜索</el-button>