vue通自定义指令实现按钮权限控制

VUE自定义指令

在 <script setup> 中，任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令。在上面的例子中，vFocus 即可以在模板中以 v-focus 的形式使用。

<template>
  <input v-focus />
</template>
<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

在没有使用 <script setup> 的情况下，自定义指令需要通过 directives 选项注册：

<template>
  <input v-focus />
</template>
<script>
export default {
  setup() {
    /*...*/
  },
  directives: {
    // 在模板中启用 v-focus
    focus: {
      /* ... */
    }
  }
}
</script>

将一个自定义指令全局注册到应用层级

const app = createApp({})

// 使 v-focus 在所有组件中都可用
app.directive('focus', {
  /* ... */
})

权限控制简单例子

main.ts文件

import { registerGlobalDirective } from './directive'
const bootstrap = async ()=>{
	const app = createApp(App)
	registerGlobalDirective(app)
	app.mount('#app')
}

directive/src/auth.ts

/**
 * 将一个自定义指令全局注册到应用层级
 * @Example v-auth=""
 */
import type { Directive, DirectiveBinding } from 'vue'
export interface ContextOptions {
  hasPermission: (
    value?: string | string[] | undefined,
    def?: boolean,
  ) => boolean
}
let context: ContextOptions = {
  hasPermission: () => false,
}
const isAuth = (el: Element, binding: any) => {
  const { value } = binding
    const all_permission = "*:*:*";
    const permissions = ['1','2','3','4','5']//权限数组
    if (value) {
      const permissionFlag = value
      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permission == permissionFlag
      })
      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
}

const mounted = (el: Element, binding: DirectiveBinding<any>) => {
  isAuth(el, binding)
}

const auth: Directive = {
  mounted,
}

export { auth }

directive/index.ts

import type { App } from 'vue'
import { auth } from './src/auth'
export { auth}

export const registerGlobalDirective = (app: App) => {
  app.directive('auth', auth)
}

index.vue文件

<template>
  <div style="height:100vh;">
	<button v-auth="1">按钮</button>
  </div>
</template>
<script setup>

</script>

更多自定义指令例子

分享8个非常实用的Vue自定义指令 (baidu.com)