vant中Field输入框禁止输入空格

一、禁止输入空格

统一修改，此方法适用于全局引入

main.js

import Vue from "vue";
import { Field } from "vant";

Vue.use(Vant);
Vue.component(Field.name, {
  extends: Field,
  props: {
    formatter: {
      type: Function,
      default: function (value) {
        return value.replace(/\s+/g, "");
      },
    },
  },
});

单独修改，此方法适用于局部引入

.vue

<van-field v-model="form.data" :update:model-value="(form.data = form.data.replace(/\s+/g, ''))" />

二、只允许在中间输入空格

统一修改，此方法适用于全局引入

main.js

import Vue from "vue";
import { Field } from "vant";

Vue.use(Vant);
Vue.component(Field.name, {
  extends: Field,
  props: {
    formatter: {
      type: Function,
      default: function (value) {
        return value.replace(/^\s+|\s+$/g, "");
      },
    },
  },
});

单独修改，此方法适用于局部引入

.vue

<van-field v-model="form.data" :update:model-value="(form.data = form.data.replace(/^\s+|\s+$/g, ''))" />

三、禁止输入多个空格

统一修改，此方法适用于全局引入

main.js

import Vue from "vue";
import { Field } from "vant";

Vue.use(Vant);
Vue.component(Field.name, {
  extends: Field,
  props: {
    formatter: {
      type: Function,
      default: function (value) {
        return value.replace("  ", "");
      },
    },
  },
});

单独修改，此方法适用于局部引入

.vue

<van-field v-model="form.data" :update:model-value="(form.data = form.data.replace('  ', ' '))" />

总结

禁止空格的方法是一致的，唯一的区别在于正则内容，记得要把 Vue.use(Vant) 写在 Vue.component() 前面。