快捷導(dǎo)航

Vue3 編寫自定義指令插件的示例代碼

更新時(shí)間：2022年07月09日 15:41:44 作者：豆棚瓜架

這篇文章主要介紹了Vue3 編寫自定義指令插件的示例代碼,主要包括編寫自定義插件，在 main.ts 中加載啟用插件的代碼介紹，對(duì)Vue3自定義指令插件相關(guān)知識(shí)感興趣的朋友一起看看吧

編寫自定義插件

// src/plugins/directive.ts
import type { App } from 'vue'
// 插件選項(xiàng)的類型
interface Options {
  // 文本高亮選項(xiàng)
  highlight?: {
    // 默認(rèn)背景色
    backgroundColor: string
  }
}
/**
 * 自定義指令
 * @description 保證插件單一職責(zé)，當(dāng)前插件只用于添加自定義指令
 */
export default {
  install: (app: App, options?: Options) => {
    /**
     * 權(quán)限控制
     * @description 用于在功能按鈕上綁定權(quán)限，沒權(quán)限時(shí)會(huì)銷毀或隱藏對(duì)應(yīng) DOM 節(jié)點(diǎn)
     * @tips 指令傳入的值是管理員的組別 id
     * @example <div v-permission="1" />
     */
    app.directive('permission', (el, binding) => {
      // 假設(shè) 1 是管理員組別的 id ，則無需處理
      if (binding.value === 1) return
      // 其他情況認(rèn)為沒有權(quán)限，需要隱藏掉界面上的 DOM 元素
      if (el.parentNode) {
        el.parentNode.removeChild(el)
      } else {
        el.style.display = 'none'
      }
    })
    /**
     * 文本高亮
     * @description 用于給指定的 DOM 節(jié)點(diǎn)添加背景色，搭配文本內(nèi)容形成高亮效果
     * @tips 指令傳入的值需要是合法的 CSS 顏色名稱或者 Hex 值
     * @example <div v-highlight="`cyan`" />
     */
    app.directive('highlight', (el, binding) => {
      // 獲取默認(rèn)顏色
      let defaultColor = 'unset'
      if (
        Object.prototype.toString.call(options) === '[object Object]' &&
        options?.highlight?.backgroundColor
      ) {
        defaultColor = options.highlight.backgroundColor
      }
      // 設(shè)置背景色
      el.style.backgroundColor =
        typeof binding.value === 'string' ? binding.value : defaultColor
    })
  },
}

在 main.ts 中加載啟用插件

// src/main.ts
import { createApp } from 'vue'
import App from '@/App.vue'
import directive from '@/plugins/directive' // 導(dǎo)入插件
createApp(App)
   // 自定義插件
  .use(directive, {
    highlight: {
      backgroundColor: '#ddd',
    },
  })
  .mount('#app')

在Vue組件中使用

<template>
  <!-- 測(cè)試 permission 指令 -->
  <div>根據(jù) permission 指令的判斷規(guī)則：</div>
  <div v-permission="1">這個(gè)可以顯示</div>
  <div v-permission="2">這個(gè)沒有權(quán)限，會(huì)被隱藏</div>
  <!-- 測(cè)試 permission 指令 -->

  <!-- 測(cè)試 highlight 指令 -->
  <div>根據(jù) highlight 指令的判斷規(guī)則：</div>
  <div v-highlight="`cyan`">這個(gè)是青色高亮</div>
  <div v-highlight="`yellow`">這個(gè)是黃色高亮</div>
  <div v-highlight="`red`">這個(gè)是紅色高亮</div>
  <div v-highlight>這個(gè)是使用插件初始化時(shí)設(shè)置的灰色</div>
  <!-- 測(cè)試 highlight 指令 -->
</template>

到此這篇關(guān)于Vue3 編寫自定義指令插件的文章就介紹到這了,更多相關(guān)Vue3自定義指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: