vue 不提供 v-model.uppercase 原生修饰符，但可通过自定义修饰符机制在组件中实现：子组件读取 props.modelmodifiers.uppercase，结合 compositionstart/end 避免中文输入法干扰，在非组词状态下对输入值调用 touppercase() 并 emit update:modelvalue。
Vue 本身不提供 v-model.uppercase 这类原生修饰符，但可以通过自定义修饰符（Custom Modifiers）机制，在组件层面实现输入内容自动转大写——关键在于让子组件识别并响应修饰符，再结合 v-model 的双向绑定契约完成转换。
自定义修饰符需配合 v-model 使用
Vue 的 v-model 修饰符本质是通过 modelModifiers 属性向子组件透传配置。只有在封装的自定义输入组件中主动读取该配置，才能触发大小写处理逻辑。
- 父组件使用：
<my-input v-model.uppercase="value"></my-input> - 子组件接收：
props.modelModifiers是一个对象，{ uppercase: true }表示启用了该修饰符 - 子组件内部需在值变更时调用
.toUpperCase()，再触发update:modelValue
核心实现步骤
以 Vue 3（组合式 API）为例，创建一个支持 .uppercase 的 MyInput 组件：
- 声明 props：接收
modelValue和modelModifiers - 监听输入事件：在
@input或@change中获取新值 - 判断修饰符：若
props.modelModifiers.uppercase为true，则对输入值调用.toUpperCase() - 触发更新：用
emit('update:modelValue', processedValue)向外同步
兼容中文输入法的关键细节
直接监听 input 事件可能在中文输入法「正在组词」阶段误转，导致拼音被大写。正确做法是：
- 用
compositionstart和compositionend标记输入法状态 - 仅在
!isComposing时执行大写转换 - 避免在
compositionupdate中触发更新，防止干扰用户选词
完整代码示例（Vue 3）
组件内无需额外指令或过滤器，纯靠 v-model 修饰符驱动：
<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
modelValue: [String, Number],
modelModifiers: { default: () => ({}) }
})
const emit = defineEmits(['update:modelValue'])
const inputRef = ref(null)
const isComposing = ref(false)
const handleInput = (e) => {
if (isComposing.value) return
let value = e.target.value
if (props.modelModifiers.uppercase) {
value = String(value).toUpperCase()
}
emit('update:modelValue', value)
}
const handleCompositionStart = () => {
isComposing.value = true
}
const handleCompositionEnd = (e) => {
isComposing.value = false
// 结束后立即处理（确保最终结果大写）
if (props.modelModifiers.uppercase && inputRef.value) {
inputRef.value.value = inputRef.value.value.toUpperCase()
emit('update:modelValue', inputRef.value.value)
}
}
</script><template><input ref="inputRef" :value="modelValue"></template>
父组件即可简洁使用：<my-input v-model.uppercase="code"></my-input>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
