vue3 全局注册自定义指令，input聚焦失焦展示对应值

简单举例：聚焦大写英文、失焦小写英文

创建一个专门的文件来存放自定义指令，例如 directives/modifyOnFocusBlur.js：

export const modifyOnFocusBlur = {mounted(el: { value: string; dispatchEvent: (arg0: Event) => void; addEventListener: (arg0: string, arg1: { (): void; (): void }) => void; _focusHandler: () => void; _blurHandler: () => void }, binding: { arg: string; modifiers: { required: any }; value: string }) {// 聚焦时的处理函数const handleFocus = () => {// 自定义聚焦时的行为if (binding.arg === 'upperlower') {el.value = el.value.toUpperCase();}// 通知 v-model 更新el.dispatchEvent(new Event('input'));};// 失焦时的处理函数const handleBlur = () => {if (binding.arg === 'upperlower') {el.value = el.value.toLowerCase();}// 通知 v-model 更新el.dispatchEvent(new Event('input'));};// 添加事件监听器el.addEventListener('focus', handleFocus);el.addEventListener('blur', handleBlur);// 保存事件处理函数引用，以便后续移除el._focusHandler = handleFocus;el._blurHandler = handleBlur;},beforeUnmount(el: { removeEventListener: (arg0: string, arg1: any) => void; _focusHandler: any; _blurHandler: any }) {// 移除事件监听器，防止内存泄漏el.removeEventListener('focus', el._focusHandler);el.removeEventListener('blur', el._blurHandler);delete el._focusHandler;delete el._blurHandler;},
};

全局注册指令

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { modifyOnFocusBlur } from './directives/modifyOnFocusBlur';const app = createApp(App);// 全局注册自定义指令
app.directive('modify-on-focus-blur', modifyOnFocusBlur);app.mount('#app');

在组件中使用自定义指令

<input v-model="message" v-modify-on-focus-blur:upperlower placeholder="输入内容">