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="输入内容">