奶糖Logo“白桃少女”：不止是甜，更是青春心事与治愈的浪漫

代码// 处理年份输入最多只能输入四位数字不能输入其他符号 const handleYearInput (value: string) { // 过滤掉所有非数字字符只保留数字 const numbersOnly value.replace(/[^\d]/g, ); // 限制4位 const limitedValue numbersOnly.slice(0,

; // 转换为数字空字符串设为0 localCapitalInfo.capitalYear limitedValue ? 0 : parseInt(limitedValue,

; }; el-input v-modellocalCapitalInfo.capitalYear clearable inputhandleYearInput /效果Vue3年份输入控制最佳实践vue3中 // 处理年份输入最多只能输入四位数字不能输入其他符号 const handleYearInput (value: string) { // 过滤掉所有非数字字符只保留数字 const numbersOnly value.replace(/[^\d]/g, ); // 限制4位 const limitedValue numbersOnly.slice(0,

; // 转换为数字空字符串设为0 localCapitalInfo.capitalYear limitedValue ? 0 : parseInt(limitedValue,

; }; ...... el-row :gutter10 el-col :span12 el-form-item label资金序号 label-positionright propcapitalNo el-input v-modellocalCapitalInfo.capitalNo clearable / /el-form-item /el-col el-col :span12 el-form-item label资金年份 label-positionright propcapitalYear el-input v-modellocalCapitalInfo.capitalYear clearable inputhandleYearInput / /el-form-item /el-col /el-row ...... el-row :gutter10 el-col :span24 el-form-item label资金年份 label-positionright el-input v-modelcapitalInfoStore.queryDTO.capitalYear clearable / /el-form-item /el-col /el-row 如何更好地实现这两处资金年份的输入控制在 Vue3 中可以通过以下几种方式更好地实现年份输入控制方案一使用计算属性 自定义指令推荐

创建自定义指令typescript// directives/inputDirectives.ts import { Directive } from vue // 只能输入数字的自定义指令 export const numberDirective: Directive { mounted(el) { el.addEventListener(input, (e: Event) { const input e.target as HTMLInputElement input.value input.value.replace(/[^\d]/g, ) }) } } // 限制最大长度的自定义指令 export const maxLengthDirective: Directive { mounted(el, binding) { const maxLength binding.value || 4 el.addEventListener(input, (e: Event) { const input e.target as HTMLInputElement if (input.value.length maxLength) { input.value input.value.slice(0, maxLength) } }) } }

在组件中使用vuetemplate el-row :gutter10 el-col :span12 el-form-item label资金年份 label-positionright propcapitalYear el-input v-model.numberlocalCapitalInfo.capitalYear :maxlength4 clearable v-number v-max-length4 blurvalidateYear / /el-form-item /el-col /el-row /template script setup langts import { ref, computed } from vue import { numberDirective, maxLengthDirective } from /directives/inputDirectives const vNumber numberDirective const vMaxLength maxLengthDirective // 使用计算属性处理年份 const localCapitalInfo ref({ capitalYear: 0 }) // 年份计算属性 const yearValue computed({ get() { return localCapitalInfo.value.capitalYear || }, set(value) { if (value ) { localCapitalInfo.value.capitalYear 0 } else { const num parseInt(value,

if (!isNaN(num) num

{ localCapitalInfo.value.capitalYear Math.min(num,

} } } }) // 验证年份 const validateYear () { const year localCapitalInfo.value.capitalYear if (year 1900 || year

{ // 可以添加错误提示 console.warn(请输入有效的年份1900-

} } /script方案二创建可复用的 Composable

创建 useYearInput Composabletypescript// composables/useYearInput.ts import { ref, computed, watch } from vue export function useYearInput(initialValue 0, options { min: 1900, max: 2100, maxLength: 4 }) { const rawValue refstring(initialValue?.toString() || ) const error refstring() // 处理输入 const handleInput (value: string) { // 只保留数字 const numbersOnly value.replace(/[^\d]/g, ) // 限制长度 rawValue.value numbersOnly.slice(0, options.maxLength) // 验证 validate() } // 验证年份 const validate () { if (rawValue.value ) { error.value return true } const yearNum parseInt(rawValue.value,

if (isNaN(yearNum)) { error.value 请输入有效的年份 return false } if (yearNum options.min || yearNum options.max) { error.value 年份范围${options.min}-${options.max} return false } error.value return true } // 获取数字值 const yearNumber computed(() { if (rawValue.value ) return 0 const num parseInt(rawValue.value,

return isNaN(num) ? 0 : num }) // 获取显示值 const displayValue computed({ get: () rawValue.value, set: (value: string) handleInput(value) }) return { rawValue, displayValue, yearNumber, error, handleInput, validate } }

在组件中使用vuetemplate el-row :gutter10 el-col :span12 el-form-item label资金年份 label-positionright propcapitalYear :erroryearInput.error el-input v-modelyearInput.displayValue :maxlength4 clearable placeholder请输入年份 bluryearInput.validate / /el-form-item /el-col /el-row /template script setup langts import { useYearInput } from /composables/useYearInput import { watch } from vue const yearInput useYearInput(2023, { min: 1900, max: 2100, maxLength: 4 }) // 如果需要可以监听数值变化 watch(() yearInput.yearNumber, (newVal) { // 更新到 store 或父组件 }) /script方案三创建 YearInput 组件最推荐

创建 YearInput 组件vue!-- components/YearInput.vue -- template el-input :model-valuedisplayValue :maxlength4 :placeholderplaceholder :clearableclearable :disableddisabled :error!!errorMessage inputhandleInput blurhandleBlur template #append v-ifshowSuffix年/template /el-input div v-iferrorMessage classerror-message /div /template script setup langts import { ref, computed, watch } from vue interface Props { modelValue?: number | string placeholder?: string clearable?: boolean disabled?: boolean showSuffix?: boolean minYear?: number maxYear?: number required?: boolean } const props withDefaults(definePropsProps(), { modelValue: 0, placeholder: 请输入年份, clearable: true, disabled: false, showSuffix: true, minYear: 1900, maxYear: 2100, required: false }) const emit defineEmits{ update:modelValue: [value: number] change: [value: number] validate: [isValid: boolean] }() const rawValue refstring() const errorMessage refstring() // 初始化 watch(() props.modelValue, (value) { if (value || value

{ rawValue.value value.toString() } }, { immediate: true }) // 显示值 const displayValue computed(() rawValue.value) // 处理输入 const handleInput (value: string) { // 只保留数字 const numbersOnly value.replace(/[^\d]/g, ) // 限制长度 rawValue.value numbersOnly.slice(0,

// 实时更新 updateValue() } // 更新值 const updateValue () { if (rawValue.value ) { emit(update:modelValue,

emit(change,

return } const yearNum parseInt(rawValue.value,

if (!isNaN(yearNum)) { const finalValue Math.min(Math.max(yearNum,

,

emit(update:modelValue, finalValue) emit(change, finalValue) } } // 验证 const handleBlur () { validate() } const validate (): boolean { errorMessage.value if (props.required !rawValue.value) { errorMessage.value 年份不能为空 emit(validate, false) return false } if (!rawValue.value) { emit(validate, true) return true } const yearNum parseInt(rawValue.value,

if (isNaN(yearNum)) { errorMessage.value 请输入有效的年份 emit(validate, false) return false } if (yearNum props.minYear || yearNum props.maxYear) { errorMessage.value 年份范围${props.minYear}-${props.maxYear} emit(validate, false) return false } emit(validate, true) return true } // 暴露方法 defineExpose({ validate, clear: () { rawValue.value updateValue() } }) /script style scoped .error-message { color: #f56c6c; font-size: 12px; margin-top: 4px; } /style

在父组件中使用vuetemplate el-row :gutter10 el-col :span12 el-form-item label资金年份 label-positionright propcapitalYear YearInput v-modellocalCapitalInfo.capitalYear :min-year2000 :max-year2100 required / /el-form-item /el-col /el-row el-row :gutter10 el-col :span24 el-form-item label资金年份 label-positionright YearInput v-modelcapitalInfoStore.queryDTO.capitalYear :clearabletrue / /el-form-item /el-col /el-row /template script setup langts import YearInput from /components/YearInput.vue import { ref } from vue const localCapitalInfo ref({ capitalYear: 2023 }) // 使用 store import { useCapitalInfoStore } from /stores/capitalInfo const capitalInfoStore useCapitalInfoStore() /script方案四使用第三方库如 v-maskbashnpm install vue-the-maskvuetemplate el-input v-modelyearValue v-mask#### placeholderYYYY clearable / /template script setup langts import { ref, watch } from vue import { VueMaskDirective } from vue-the-mask const vMask VueMaskDirective const yearValue ref() /script

总结建议推荐方案三创建YearInput组件封装性好可复用性强次推荐方案二使用 Composable逻辑复用方便简单场景可以使用计算属性 自定义指令优势统一处理逻辑避免重复代码支持验证和错误提示易于维护和扩展类型安全TypeScript根据项目复杂度和复用需求选择合适的方案组件化方式更适合长期维护的项目。

www路91-www路应用