Vue3实现全局自动大写转换的两种方案

const globalUppercaseConfig = {
  defaultEnabled: true,
  processedInputs: new WeakSet(),
  disabledInputs: new WeakSet()
};

export default {
  mounted(el, binding) {
    const inputElement = el.querySelector('.el-input__inner')
      || el.querySelector('input')
      || el.querySelector('textarea');
    if (!inputElement) return;

    const config = binding.value || {};
    const enabled = config.enabled !== false;

    if (!enabled) {
      globalUppercaseConfig.disabledInputs.add(el);
      return;
    }
    if (globalUppercaseConfig.processedInputs.has(el)) return;
    globalUppercaseConfig.processedInputs.add(el);

    let isComposing = false;

    const toUpperCase = () => {
      if (isComposing || !inputElement.value) return;
      const oldValue = inputElement.value;
      const newValue = oldValue.toUpperCase();
      if (oldValue !== newValue) {
        inputElement.value = newValue;
        inputElement.dispatchEvent(new Event('input', { bubbles: true }));
      }
    };

    if (inputElement.value) toUpperCase();
    inputElement.addEventListener('input', toUpperCase);
    inputElement.addEventListener('paste', () => setTimeout(toUpperCase, 10));
    inputElement.addEventListener('compositionstart', () => { isComposing = true; });
    inputElement.addEventListener('compositionend', () => {
      isComposing = false;
      setTimeout(toUpperCase, 10);
    });

    el._toUpperCase = toUpperCase;
    el._inputElement = inputElement;
  },

  beforeUnmount(el) {
    if (el._inputElement && el._toUpperCase) {
      el._inputElement.removeEventListener('input', el._toUpperCase);
      el._inputElement.removeEventListener('paste', el._toUpperCase);
    }
    globalUppercaseConfig.processedInputs.delete(el);
  }
};

export { globalUppercaseConfig };

// src/main.js
import uppercase from './directives/inputUppercase.js'

app.directive('input-uppercase', uppercase)

<!-- 自动大写 -->
<el-input v-model="plateNo" v-input-uppercase placeholder="请输入车牌号" />
<!-- 某些字段不需要转大写 -->
<el-input v-model="name" v-input-uppercase="{ enabled: false }" />

import { globalUppercaseConfig } from '../directives/inputUppercase.js';

// 排除某些页面（如登录页不需要大写）
const globalUppercasePluginConfig = {
  excludedPaths: ['/home/login', '/qp/tableModuSet']
};

export const GlobalUppercasePlugin = {
  install(app) {
    app.mixin({
      mounted() {
        this.$nextTick(() => {
          if (!this.$el || typeof this.$el.querySelectorAll !== 'function') return;

          const currentPath = window.location.hash || window.location.pathname;
          if (globalUppercasePluginConfig.excludedPaths.some(p => currentPath.includes(p))) return;

          const applyTo = (el) => {
            if (globalUppercaseConfig.processedInputs.has(el)) return;

            const actualInput = el.querySelector('.el-input__inner')
              || el.querySelector('input')
              || el.querySelector('textarea')
              || (['INPUT', 'TEXTAREA'].includes(el.tagName) ? el : null);
            if (!actualInput) return;

            let isComposing = false;
            const toUpperCase = () => {
              if (isComposing || !actualInput.value) return;
              const newVal = actualInput.value.toUpperCase();
              if (actualInput.value !== newVal) {
                actualInput.value = newVal;
                actualInput.dispatchEvent(new Event('input', { bubbles: true }));
              }
            };

            if (actualInput.value) toUpperCase();
            actualInput.addEventListener('input', toUpperCase);
            actualInput.addEventListener('paste', () => setTimeout(toUpperCase, 10));
            actualInput.addEventListener('compositionstart', () => { isComposing = true; });
            actualInput.addEventListener('compositionend', () => {
              isComposing = false;
              setTimeout(toUpperCase, 10);
            });

            globalUppercaseConfig.processedInputs.add(el);
            el._toUpperCase = toUpperCase;
            el._inputElement = actualInput;
          };

          // 处理 el-input
          this.$el.querySelectorAll('.el-input').forEach(applyTo);
          // 处理 el-textarea
          this.$el.querySelectorAll('.el-textarea').forEach(applyTo);

          // 处理 el-select（搜索模式下的输入框）
          this.$el.querySelectorAll('.el-select').forEach(el => {
            const selectInput = el.querySelector('.el-select__input');
            if (selectInput) applyTo(selectInput);
          });
        });
      },

      beforeUnmount() {
        if (!this.$el) return;
        this.$el.querySelectorAll('.el-input, .el-textarea, .el-select').forEach(el => {
          if (el._inputElement && el._toUpperCase) {
            el._inputElement.removeEventListener('input', el._toUpperCase);
            el._inputElement.removeEventListener('paste', el._toUpperCase);
          }
          globalUppercaseConfig.processedInputs.delete(el);
        });
      }
    });
  }
};

export { globalUppercasePluginConfig };

// src/main.js
import { GlobalUppercasePlugin } from './plugins/globalUppercase.js'

app.use(GlobalUppercasePlugin)

export const GlobalInputFilterPlugin = {
  install(app, options = {}) {
    const { mode = 'uppercase' } = options; // 'uppercase' | 'noQuote' | 'both'

    app.mixin({
      mounted() {
        this.$nextTick(() => {
          // ...统一的处理逻辑
          const transform = (val) => {
            if (mode === 'uppercase') return val.toUpperCase();
            if (mode === 'noQuote') return val.replace(/'/g, '');
            if (mode === 'both') return val.toUpperCase().replace(/'/g, '');
            return val;
          };
          // ...
        });
      }
    });
  }
};

// 使用
app.use(GlobalInputFilterPlugin, { mode: 'both' })