Vant 又一神器 Vant4-kit 来啦！！！

又一神器 Vant4-kit 来了，额，为什么会说又呢？因为它【发现一个Element-Plus 小工具，用起来不要太爽 】

背景

最近工作上做了几个H5项目，因为统一框架都是Vue3+ts+Vant4，所以就只能使用Vant4版本的UI库，但是开发的过程中发现Vant官方的Form表单极其的不好用，所有就想到了element-plus-kit的QForm，要是移动端也能有这么一套就好了，所以潜心研究了一下Vant的开源代码。推出了Vant4-kit这款移动端开发神器。

让我们来看看Vant4-kit都做了些什么吧：Vant4-kit 文档

---

上效果

你还别说，文档看起来有些小清新的感觉。我是一个拒绝内卷的人，所以一切的触发点都是： 早点下班。毕竟

浏览一圈vant4-kit为文档库，发现文档很简洁，目前主要是新补充了一个vant目前没有的日期时间组件 XDatetimePicker 和一个 XForm 组合类组件。

XForm

从文章中可以看出，XForm 其实是一个组合类组件，为了适应复杂的移动端表单页面开发。目前 XForm 支持
20种 组件的配置，其中Vant原生组件8种、组合类选择器3种，另外补充了4种常用的场景的组件。基本上满足了日常的业务场景开发，而且还配置了相关的Demo，可以说文档比较详细。

使用效果

• html部分

  <div>
    <x-form :model="formValue" :items="formOptions" label-align="top">
      <template #customSlot1>
        <h3>我是一个自定义 field input插槽</h3>
      </template>
      <template #customSlot>
        <Button type="primary" block>我也是插槽，但我是一个不带field的插槽</Button>
      </template>
    </x-form>
  </div>

• js部分

import { ref } from 'vue'
import { Button } from 'vant'
import type { XFormItemOption } from 'vant4-kit';
const formValue = ref({
  text: '我是一段自定义文本',
  html: '<h4>我是一个带h4标签的html片段</h4>'
})
const formOptions = ref<XFormItemOption>([
  {label: '普通输入',type: 'input',name: 'name',  },
  {label: '密码输入',type: 'input',name: 'password',itemProps: {type:'password'}},
  {label: '步进器',type: 'stepper',    name: 'age',  },
  {label: '单选',type: 'radio', name: 'sex',
   options: [{ text: '男', value: '1' },{ text: '女', value: '0' }]
  },
  {label: '滑动', type: 'slider',name: 'slider'},
  {label: '开关',type: 'switch',name: 'switch',attrs: {activeValue: '1',inactiveValue: '0'}},
  {type: 'rate',label: 'rate 评分',name: 'rate'},
  {label: '选择器（单列）',type: 'picker',name: 'picker1',
    options: [
      { text: '杭州', value: 'Hangzhou' }, { text: '宁波', value: 'Ningbo' },
      { text: '温州', value: 'Wenzhou' }, { text: '绍兴', value: 'Shaoxing' },
    ],
  },
  {type: 'date-picker',label: '日期',name: 'datePicker'},
  {type: 'time-picker'label: '时间选择'name: 'timePicker'},
  {type: 'datetime-picker',label: '日期时间（单页）',name: 'datetimePicker',
    attrs: {showType: 'single',groupProps: {'columns-type': ['hour', 'minute']}}
  },
  {type: 'date-range-picker',label: '日期范围',name: 'dateRangePicker'},
  {type: 'time-range-picker',label: '时间范围',name: 'timeRangePicker'},
  {type: 'datetime-range-picker', label: '日期时间范围', name: 'datetimeRangePicker',
    attrs: {
        groupProps: [
            { 'columns-type': ['hour', 'minute',] },
            { 'columns-type': ['hour', 'minute', 'second'] }
        ]
    }
  },
  {type: 'area',label: '地区',name: 'areaPicker',},
  {type: 'cascader',label: '级联',name: 'cascader',attrs: {useVantAreaData: true}},
  {type: 'text',label: '文本',name: 'text',},
  {type: 'html',label: 'html片段',name: 'html',hiddenLabel: false},
  {type: 'input-slot',label: '表单插槽',name: 'customSlot1',},
  {type: 'slot',label: '全部插槽',name: 'customSlot' },
])

• 效果
  

轻轻松松配置出一个常用表单，并且还支持控制显隐的交互、 检验规则设置、表单只读，插槽更是丰富又好用。

XDatetimePicker

阅读了XDatetimePicker 发现，它其实是对vant组件库确实一个特日期时间组件的补充，虽然vant提供了picker-group结合date-picker和time-picker可以实现日期时间的选择，但是如果是涉及到 日期时间范围 的选择，vant的这种组合方式显然就有些吃力了，这个组件也确实发挥了自己的作用。

• html部分

 <x-datetime-picker v-model="dateTime" title="选择时间" :minYear="2020" :maxYear="2025"
        :columns-type="['hour', 'minute']" :formatter="handleFormatter"></x-datetime-picker>

• js部分

import { ref } from 'vue'
const dateTime = ref([])

const handleFormatter = (type: string, option: any) => {
    console.log('type', type);
    if (type === 'year') {
        option.text += '年'
    }
    if (type === 'month') {
        option.text += '月'
    }
    if (type === 'day') {
        option.text += '日'
    }
    if (type === 'hour') {
        option.text += '时'
    }
    if (type === 'minute') {
        option.text += '分'
    }
    if (type === 'second') {
        option.text += '秒'
    }

    return option;
}

• 效果

最后

大佬轻喷，有意见的可以去提issue，觉得可以的点个 star 支持一下