当前位置：首页 > news >正文

vue3 ts 自定义指令 app.directive

news 来源：原创 2025/5/11 6:41:23

在 Vue 3 中，app.directive 是一个全局 API，用于注册或获取全局自定义指令。以下是关于 app.directive 的详细说明和使用方法

app.directive 用于定义全局指令，这些指令可以用于直接操作 DOM 元素。自定义指令在 Vue 3 中非常强大，可以用来封装复杂的 DOM 操作、复用常见的交互行为

1.定义全局指令

app.directive('highlight', {
  created(el, binding, vnode) {
    // 在元素的属性或事件监听器应用前调用
  },
  beforeMount(el, binding, vnode) {
    // 在元素插入到 DOM 前调用
    el.style.backgroundColor = binding.value || 'yellow';
  },
  mounted(el, binding, vnode) {
    // 在元素插入到 DOM 后调用
  },
  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 钩子中可用。

举例来说，像下面这样使用指令：

<div v-example:foo.bar="baz">

2.使用指令在组件中使用自定义指令时，只需在模板中绑定指令即可：

<template>
  <p v-highlight="'aqua'">This paragraph will be aqua-colored.</p>
</template>

3.Vue3的自定义指令提供了以下生命周期钩子：

created：在元素的属性或事件监听器应用前调用。
beforeMount：在元素插入到 DOM 前调用。
mounted：在元素插入到 DOM 后调用。
beforeUpdate：在元素更新前调用。
updated：在元素更新后调用。
beforeUnmount：在元素卸载前调用。
unmounted：在元素卸载后调用。

自定义指令

v-copy

directive/copy/index.ts

import type { Directive, DirectiveBinding, App } from 'vue'
import { ElMessage } from 'element-plus'
import {EventType} from '../types'

function addEventListener(el: Element, binding: DirectiveBinding) {
  const { value, arg,modifiers } = binding
  console.log(value,modifiers,arg,'ssss');
  
   // 确定事件类型和提示消息
  const eventType: EventType = modifiers.dblclick ? 'dblclick' : 'click'
  const message = arg || '复制成功' as string
  el.setAttribute('copyValue', String(value))

  const copyHandler = async ():Promise<void> => {
    try {
      if (navigator.clipboard) {
        await navigator.clipboard
        .writeText(el.getAttribute('copyValue') || '')
      } else {
        legacyCopy(el.getAttribute('copyValue') || '')
      }
       // 非静默模式显示提示
       if (!modifiers.quiet) {
        ElMessage({
          message: message,
          type: 'success',
        })
      } 
    } catch (err) {
      ElMessage.error('复制失败！')
    }
  }   
  el.addEventListener(eventType, copyHandler)
}

function legacyCopy(textToCopy: string) {
  const textarea = document.createElement('textarea')
  textarea.value = textToCopy
  textarea.style.position = 'fixed'
  document.body.appendChild(textarea)
  textarea.select()
  if (!document.execCommand('copy')) {
    throw new Error('execCommand 执行失败')
  } 
  document.body.removeChild(textarea)
}
const vCopy: Directive = {
  mounted(el: HTMLElement, binding:DirectiveBinding) {
    addEventListener(el, binding)
  },
  updated(el: HTMLElement, binding:DirectiveBinding) {
    const { value } = binding
    el.setAttribute('copyValue', String(value))
  },
}
export const setupCopyDirective = (app: App<Element>) => {
  app.directive('copy', vCopy)
}
export default vCopy

2.v-focus

import type { Directive ,App} from 'vue'

const vFocus: Directive = {
  mounted(el: HTMLElement) {
    console.log(el,'el');
    el.focus && el.focus()
  },
  updated(el: HTMLElement) {
    el.focus && el.focus()
  },
}
export const setupFocusDirective = (app: App<Element>) => {
  app.directive('focus', vFocus)
}
export default vFocus

组件中使用

<script setup lang="ts">
  import {ref} from "vue";
  import { BaseButton } from '@/components/Button'
  import { ElInput } from 'element-plus'
  const value = ref<string>('我是要复制的值')
  const change = ref<string>('我是要改变的值')
</script>

<template>
  <button v-copy.dblclick="value">点击我复制</button>
  <BaseButton type="primary" class="w-[20%]" v-copy:复制成功了.dblclick="value">
    点击我复制
  </BaseButton>
  <el-input v-model="change" placeholder="Please input" />
  <BaseButton type="primary" class="w-[20%]" @click="() => value = change">
    改变将要复制的值
  </BaseButton>
 <input v-model="value" placeholder="111" v-focus />
</template>

<style scoped>

</style>