当前位置：首页 > news >正文

Ant Design Vue V1.7.8版本，a-input 去空格

news 2026/6/2 19:45:33

目前项目在使用Vue2.6+Ant Design Vue V1.7.8版本开发，其实就是用了jeecg的框架，发现这个比较旧的版本没有**.trim()**的方法，所以只能手搓；

第一种：全局添加

注意：用了第一种发现在使用苹果电脑的时候，苹果输入法有bug；
注意：用了第一种发现在使用苹果电脑的时候，苹果输入法有bug；
注意：用了第一种发现在使用苹果电脑的时候，苹果输入法有bug；
main.js文件

mounted(){document.body.addEventListener('input',this.removeSpacesFromInput,true);}//去掉input的空格methods:{removeSpacesFromInput(e){// 判断是否为 Ant Design 的 a-input 元素if(e.target.tagName==='INPUT'){if(e.target.closest('.ant-input')){// 对 Ant Design 的 a-input 组件去除空格e.target.value=e.target.value.replace(/\s+/g,'');}elseif(e.target.closest('.el-input__inner')){// 对 Element UI 的 el-input 组件去除空格e.target.value=e.target.value.replace(/\s+/g,'');}}}},//去掉input的空格beforeDestroy(){// 在组件销毁前移除事件监听document.body.removeEventListener('input',this.removeSpacesFromInput,true);}

第二种：在单个页面中，单个输入框中使用

例子一：

a-input 输入框使用了v-model的情况下

<a-form-model-item label="往来单位名称"prop="supplierName"><a-input v-model="form.supplierName"@input="handleSupplierNameInput"placeholder='请输入往来单位名称!':disabled="type == 'detail'"/></a-form-model-item>// 在方法里面实现methods:{handleSupplierNameInput(e){constvalue=e.target.value;consttrimmedValue=value.replace(/\s+/g,'');if(value!==trimmedValue){this.$nextTick(()=>{this.form.supplierName=trimmedValue;});}else{this.form.supplierName=value;}},}

例子二：

使用 v-decorator 的方式

data(){return{form:this.$form.createForm(this),}}a-form-item label="姓名"><a-input v-decorator="['contactName',{rules:[{required:true,message:'请输入姓名!'}],getValueFromEvent:(event)=>event.target.value.replace(/\s+/g,''),initialValue:'',validateTrigger:'blur'}]" placeholder='请输入姓名':disabled="type == 'detail'"/></a-form-item>

例子三：

使用 v-decorator 的方式 + 自定义校验

data(){return{validatorRules:{username:{rules:[{required:true,message:'请输入用户账号!'},{pattern:/^[a-zA-Z0-9]+$/,// 正则匹配英文数字message:'只能输入英文或数字!'},{validator:this.validateUsername,}]},}}}<a-form-item label="用户账号":labelCol="labelCol":wrapperCol="wrapperCol"><a-input placeholder="请输入用户账号（输入英文或数字）"v-decorator="['userName',{rules:validatorRules.username?validatorRules.username.rules:[],getValueFromEvent:(event)=>event.target.value.replace(/\s+/g,''),initialValue:'',validateTrigger:'blur'}]":readOnly="!!model.id"autocomplete="new-userName"/></a-form-item>