Vue 自定义指令

注册

局部注册

export default {setup() {/*...*/},directives: {// 在模板中启用 v-focusfocus: {/* ... */}}
}

全局注册

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

钩子

const myDirective = {// 在绑定元素的 attribute 前// 或事件监听器应用前调用created(el, binding, vnode) {// 下面会介绍各个参数的细节},// 在元素被插入到 DOM 前调用beforeMount(el, binding, vnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted(el, binding, vnode) {},// 绑定元素的父组件更新前调用beforeUpdate(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用updated(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载前调用beforeUnmount(el, binding, vnode) {},// 绑定元素的父组件卸载后调用unmounted(el, binding, vnode) {}
}

钩子参数

指令的钩子会传递以下几种参数：

• el：指令绑定到的元素。这可以用于直接操作 DOM。
• binding：一个对象，包含以下属性。
  • value：传递给指令的值。例如在 v-my-directive=“1 + 1” 中，值是 2。
  • oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
  • arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 “foo”。
  • modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
  • instance：使用该指令的组件实例。
  • dir：指令的定义对象。
• vnode：代表绑定元素的底层 VNode。
• prevVnode：代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

应用

1、按钮权限验证

功能描述： 项目根据登录用户所配置的角色权限，对按钮进行权限控制，拥有权限的按钮才能够触发点击事件，没有权限的按钮触发时进行提示。

/*** # 验证用户权限, 并进行提示** @example* ```vue* <el-button*   v-auth="{*     code: AuthCode.UPLOAD_FILE,*     name: AuthName.UPLOAD_FILE,*     event: handleUploadConfirm,*     projectId*   }"* >*   确认上传* </el-button>* ```** @param code 权限 code* @param name 权限对应中文名* @param event 权限验证通过后要执行的函数* @param projectId? 可选, 项目 id* @param type 两种验证模式 'project' | 'role' 如果是 role, 则通过默认角色权限进行判断, 如果是 project, 则通过项目权限进行判断*/
export default <Directive>{mounted(el: HTMLElement, bindings) {if (!bindings.value) {throw new Error('value 不能为空')}if (typeof bindings.value !== 'object') {throw new Error('value 必须为对象')}const {code,name,event,type,projectId,bindEvent = 'click'} = bindings.valueel.addEventListener(bindEvent, () => {if (!checkAuth(code, name, projectId, type)) {return}if (typeof event === 'function') {event()}})}
}/*** @param code 权限 code* @param name 权限名称* @param projectId 项目 id* @param type 两种验证模式 'project' | 'role' 如果是 role, 则通过默认角色权限进行判断, 如果是 project, 则通过项目权限进行判断* @returns*/
function checkAuth(code?: string,name?: string,projectId?: string,type = 'project'
) {if (!code) {throw new Error('权限名称不能为空')}const userStore = useUserStore()let auth = falseif (type === 'project' && projectId) {auth = checkProject(code, projectId)} else if (type === 'role') {auth = checkRole(code)}if (!auth) {// 用户没有该权限ElMessage.warning(`您没有 ${name} 权限，无法执行该操作！`)return false}return true
}function checkProject(code: string, projectId: string) {...
}function checkRole(code: string) {...
}

2、自定义用户行为收集指令

功能描述：需要对项目中用户的行为进行收集，以备后续的日志记录查询或者用户行为分析。 比如记录哪个用户，在什么时间，在哪个页面，触发了什么功能。支持按钮按钮行为收集、非按钮点击行为收集。

/*** @example* <el-link*   type="primary"*   v-collect*   @click="getRoleAuthList(row)"* >*   查看* </el-link>* * <el-button*   size="large"*   type="primary"*   v-collect*   @click="handleClickMove"* >*   新增项目* </el-button>* * 自定义用户行为收集指令*/
export default <Directive>{mounted(el: HTMLElement, bindings) {// 可以根据当前路由转换得到中文的页面const pathname = window.location.pathnameconst userInfo = getUserInfo()el.addEventListener('mousedown', e => {e.stopPropagation()const collect = getCollect()const path: string = bindings.value || (el.textContent as string)let name = (path?.trim())?.trim() || ''if (name.startsWith('/')) {name = name.slice(1)}collect.push({userId: userInfo.id,operateTime: getTime(),page: pathname,operateName: name})setCollect(collect)})}
}const collectKey = 'USER_SELECT'
function getCollect(): Collect[] {const collect = window.localStorage.getItem(collectKey) || '[]'return JSON.parse(collect)
}function setCollect(collect: Collect[]) {window.localStorage.setItem(collectKey, JSON.stringify(collect))
}

3、按钮点击防抖

功能描述：点击按钮进行操作时，防止用户短时间点击多次触发多次事件，为按钮点击事件添加防抖功能，默认 1 秒以内重复点击无效。实现方案是点击按钮触发一次事件，给按钮设置 disabaled 属性为 true，1 秒后删除该限制。

/*** @example* <el-button v-clicked:500></el-button>* * @param delay number类型, 设置禁止点击的时间间隔, 默认1000*/export default {mounted(el: HTMLElement | HTMLButtonElement, bindings: DirectiveBinding) {let timer: number | null = nulllet delay = 1000const oldEvents = el.style.pointerEventsif (bindings.arg) {if (!/^\d+$/.test(bindings.arg)) {throw new Error('参数必须是数字')}delay = Number(bindings.arg)}el.addEventListener('click', setDisabled)function setDisabled() {el.setAttribute('disabled', 'true')// el.classList.add('is-disabled')if (el.tagName !== 'BUTTON') {el.style.pointerEvents = 'none' // 点击不到按钮，穿透到下层元素}if (timer) {window.clearTimeout(timer)timer = null}timer = window.setTimeout(() => {// el.classList.remove('is-disabled')el.removeAttribute('disabled')el.style.pointerEvents = oldEvents}, delay)}}
}

4、输入框自动获取焦点

功能描述：页面加载之后自动聚焦到某个输入框，使输入框处于输入状态

/**
* @example
* <el-input v-focus></el-input>
*/
export default {mounted(el: HTMLElement | HTMLInputElement) {let ipt: HTMLInputElement | nullif (el.nodeName === 'INPUT') {ipt = el as HTMLInputElement} else {ipt = el.querySelector('.el-input__inner') as HTMLInputElement}ipt && (ipt as HTMLInputElement).focus()}
}

5、输入框自动去空字符串

interface HTMLElementPlus extends HTMLElement {_handler: (e: KeyboardEvent) => void_ele: HTMLElementPlus
}
export default {mounted(el: HTMLElementPlus) {let iptif (el.nodeName === 'INPUT') {ipt = el} else {ipt = el.querySelector('.el-input__inner')}const handler = (e: KeyboardEvent) => {if (e.code === 'Space') {e.preventDefault()}}el._ele = ipt as HTMLElementPlusel._handler = handler;(ipt as HTMLElementPlus).addEventListener('keydown', handler)},unmounted(el: HTMLElementPlus) {const { _ele } = el_ele.removeEventListener('keydown', _ele._handler)}
}

6、文字展示不下时展示提示框

功能描述：项目里经常有一些列表有展示性文字，有的项文字展示的全有的项文字展示不全，如果简单粗暴的添加提示文字会使得展示全的文字也有提示文字，不太友好。通过该自定义指令，只对展示不全的文字添加文字提示。

/*** 根据字符长度控制 el-tooltip 的显隐* 1.单行文本使用：需在对应组件定义moveTodisabled* 例：*  const moveTodisabled = ref({disablesd: true})*  <el-tooltip:content="item.name":disabled="moveTodisabled"><div v-tooltip="moveTodisabled">{{ item.name }}</div></el-tooltip>*//*** 2.列表使用, 参数: list，index(当前索引)例：<el-option v-for="(item, index) in fileNameList" :key="item.id" :label="item.name" :value="item.name"><el-tooltip:content="item.name":disabled="item.moveTodisabled"><div v-tooltip:[index]="fileNameList" class="custom-dropdown-item">{{ item.name }}</div></el-tooltip></el-option>*/
interface Actual {width: numberelement: HTMLSpanElement
}
interface HTMLElementPlus extends HTMLElement {_handler: () => void_handler2: () => void_ele: HTMLElementPlus_ele_temp: HTMLSpanElement | null
}function getActualWidth(text: string, fontSize: string): Actual {const span: HTMLSpanElement = document.createElement('span')span.innerText = textspan.style.cssText ='visibility:hidden;position:absolute;z-index:-1;top:0;font-size:' + fontSizedocument.body.appendChild(span)const rect = span.getBoundingClientRect()// offsetWidth 是整数return { width: Math.round(rect.width), element: span }
}function destoryEle(ele: HTMLSpanElement) {ele.parentNode?.removeChild(ele)
}export default {mounted(el: HTMLElementPlus, binding: DirectiveBinding) {const handler = () => {const fontSize = getComputedStyle(el, null).fontSizeconst { width, element }: Actual = getActualWidth(el.innerText, fontSize)el._ele_temp = element as HTMLSpanElementif (el.offsetWidth < width) {if (!isNaN(index)) {binding.value[index].moveTodisabled = false} else {binding.value.disabled = false}} else {if (!isNaN(index)) {binding.value[index].moveTodisabled = true} else {binding.value.disabled = true}}}const handle2 = () => {destoryEle(el._ele_temp as HTMLSpanElement)el._ele_temp = null}el._handler = handlerel._handler2 = handle2el._ele = elel.addEventListener('mouseenter', handler)el.addEventListener('mouseout', handle2)},unmounted(el: HTMLElementPlus) {const { _ele } = el_ele.removeEventListener('mouseenter', _ele._handler)_ele.removeEventListener('mouseout', _ele._handler2)}
}