Vue3 编写自定义指令插件
编写自定义插件
1 // src/plugins/directive.ts 2 import type { App } from 'vue' 3 4 // 插件选项的类型 5 interface Options { 6 // 文本高亮选项 7 highlight?: { 8 // 默认背景色 9 backgroundColor: string 10 } 11 } 12 13 /** 14 * 自定义指令 15 * @description 保证插件单一职责，当前插件只用于添加自定义指令 16 */ 17 export default { 18 install: (app: App, options?: Options) => { 19 /** 20 * 权限控制 21 * @description 用于在功能按钮上绑定权限，没权限时会销毁或隐藏对应 DOM 节点 22 * @tips 指令传入的值是管理员的组别 id 23 * @example <div v-permission="1" /> 24 */ 25 app.directive('permission', (el, binding) => { 26 // 假设 1 是管理员组别的 id ，则无需处理 27 if (binding.value === 1) return 28 29 // 其他情况认为没有权限，需要隐藏掉界面上的 DOM 元素 30 if (el.parentNode) { 31 el.parentNode.removeChild(el) 32 } else { 33 el.style.display = 'none' 34 } 35 }) 36 37 /** 38 * 文本高亮 39 * @description 用于给指定的 DOM 节点添加背景色，搭配文本内容形成高亮效果 40 * @tips 指令传入的值需要是合法的 CSS 颜色名称或者 Hex 值 41 * @example <div v-highlight="`cyan`" /> 42 */ 43 app.directive('highlight', (el, binding) => { 44 // 获取默认颜色 45 let defaultColor = 'unset' 46 if ( 47 Object.prototype.toString.call(options) === '[object Object]' && 48 options?.highlight?.backgroundColor 49 ) { 50 defaultColor = options.highlight.backgroundColor 51 } 52 53 // 设置背景色 54 el.style.backgroundColor = 55 typeof binding.value === 'string' ? binding.value : defaultColor 56 }) 57 }, 58 }
在 main.ts 中加载启用插件
1 // src/main.ts 2 import { createApp } from 'vue' 3 import App from '@/App.vue' 4 import directive from '@/plugins/directive' // 导入插件 5 6 createApp(App) 7 // 自定义插件 8 .use(directive, { 9 highlight: { 10 backgroundColor: '#ddd', 11 }, 12 }) 13 .mount('#app')
在Vue组件中使用
1 <template> 2 <!-- 测试 permission 指令 --> 3 <div>根据 permission 指令的判断规则：</div> 4 <div v-permission="1">这个可以显示</div> 5 <div v-permission="2">这个没有权限，会被隐藏</div> 6 <!-- 测试 permission 指令 --> 7 8 <!-- 测试 highlight 指令 --> 9 <div>根据 highlight 指令的判断规则：</div> 10 <div v-highlight="`cyan`">这个是青色高亮</div> 11 <div v-highlight="`yellow`">这个是黄色高亮</div> 12 <div v-highlight="`red`">这个是红色高亮</div> 13 <div v-highlight>这个是使用插件初始化时设置的灰色</div> 14 <!-- 测试 highlight 指令 --> 15 </template>
