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

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

第一种：全局添加

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

main.js文件

javascript 复制代码

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, '');
        } else if (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的情况下

javascript 复制代码

<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) {
        const value = e.target.value;
        const trimmedValue = value.replace(/\s+/g, '');
        if (value !== trimmedValue) {
          this.$nextTick(() => {
          this.form.supplierName = trimmedValue;
          });
        } else {
          this.form.supplierName = value;
        }
      },
  }

例子二：

使用 v-decorator 的方式

javascript 复制代码

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 的方式 + 自定义校验

javascript 复制代码

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>

以上就是我目前遇到的几种情况吧