Vant Field扩展

事情的起因

<van-field rules="[{required: true}]">中可以对输入框做非空限制；但是如果输入空格却可以校验通过，奈何测试同学就是喜欢输入空格，而项目中有大量的输入框校验；如果一个一个的校验的话势必是个大工程，实在是不能忍

解决

vue2

import { Field } from 'vant'; // 2.12.54
import Vue from 'vue'

// Vue.use(Field)
Vue.component(Field.name {
  extends: Field,
  props: {
    formatter: {
      type: Function
    }
  }
})

vue3

vue3中用上述的方法没办法覆盖Field；但是可以使用如下方法

import { createApp } from "vue";
import { Field } from "vant";
import "vant/lib/index.css";

const app = createApp(Layout);

Field.props.formatter = {
	type: Function,
	default: function (value) {
		return value.trim();
	},
};

app.use(Field);

vue2.7

升级2.7之后需改成如下写法，不然会报出一个type的错

Field.props.formatter = {
	type: Function,
	default: function (value) {
		return value.trim();
	},
};