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

Vue3+ts自定义指令

backend 2025/8/6 17:20:25

1. 在 directives/index.ts 中整合自定义指令：

在 src/directives/index.ts 文件中定义多个自定义指令。

// 防抖指令
interface DebounceBinding {(): void;time?: number;logPrefix?: string;
}export const debounce: Directive = {mounted(el: HTMLElement, binding: { arg: string; value: DebounceBinding }) {let timer: NodeJS.Timeout | null = null;el.addEventListener(binding.arg, () => {if (timer) {clearTimeout(timer);}const delay = binding.value.time || 300;const logPrefix = binding.value.logPrefix || 'Debounce';timer = setTimeout(() => {console.log(`${logPrefix}: 防抖后的函数执行`);binding.value();}, delay);});},unmounted(el: HTMLElement) {if (timer) {clearTimeout(timer);}}
};// 聚焦指令
export const focus: Directive = {inserted(el: HTMLElement) {el.focus();}
};// 图片懒加载指令
export const lazyload: Directive = {mounted(el: HTMLImageElement, binding: { value: string }) {const img = new Image();const loadingClass = 'image-loading';const errorClass = 'image-error';el.classList.add(loadingClass);const observer = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {img.src = binding.value;img.onload = () => {el.src = binding.value;el.classList.remove(loadingClass);observer.unobserve(el);};img.onerror = () => {el.classList.remove(loadingClass);el.classList.add(errorClass);observer.unobserve(el);};}});});observer.observe(el);}
};

2. 在 main.ts 中全局注册自定义指令：

import { createApp } from 'vue';
import App from './App.vue';
import { debounce, focus, lazyload } from './directives';const app = createApp(App);app.directive('debounce', debounce);
app.directive('focus', focus);
app.directive('lazyload', lazyload);app.mount('#app');

3. 在组件中使用自定义指令：

在 XXX.vue 中使用这几个自定义指令。

<template><div><input v-focus type="text" placeholder="自动聚焦"><input type="text" v-debounce:input="inputDebounce" :time="500" :logPrefix="自定义前缀">< img v-lazyload="imageUrl" alt="示例图片"></div>
</template><script setup lang="ts">
const inputDebounce = () => {console.log('实际执行的函数');
};const imageUrl = 'your-image-url.jpg';
</script>