vant 组件

van-form 自定义项校验

form组件

<template>
  <van-form ref="form" @submit="props.submit">
    <template v-for="item in formItems" :key="item.field">
      <!-- 自定义项，用于非标准组件取值和校验 -->
      <slot
        v-if="item.slot"
        :name="item.slot"
        :item="item"
        :data="formData[item.field]"
        :changeData="(data) => changeSlotData(item.field, data)"
      />
    </template>
  </van-form>
</template>

<script setup>
const changeSlotData = (data, field) => {
  console.log(data, field);
  formData[field] = data;
};
</script>

使用form组件

<template>
  <my-form ref="form" v-bind="{...formConfig}">
    <template #test="scope">
      <div>label</div>
      <div>
        <van-field v-model="scope.data" placeholder="请输入" :name="scope.item.field" maxlength="110" required="true" :rules="scope.item.rules"
          :rows="3">
          <!-- 可用可不用，不用的话可以在input中统一定制 -->
          <template #label>
            <span>label</span>
          </template>
          <template #input>
            <!-- 这里自定义自己的内容，同时触发data更新到form组件内部 -->
            <!-- 同时为了布局美观，可以定义class在van-field中 -->
            <span @click="scope.changeVal(Date.now())">请输入正确内容</span>
            <span>{{ scope.data }}</span>
          </template>
        </van-field>
      </div>
    </template>
  </my-form>
</template>

<script setup>
const fromConfig = reactive({
  items: [
    {
      slot: 'test',
      field: 'test',
      rules: [
        {
          validator: (val) => {
            console.log('val', val);
            if (val) {
              return true;
            }
            return false;
          }, message: '请输入正确内容'
        }
      ]
    },
  ],
})

文件历史