原创 苏格拉斯 2025-03-06 08:31 重庆
点击关注公众号，“技术干货” 及时达！
又一神器 Vant4-kit 来了，额，为什么会说又呢？因为它【发现一个Element-Plus 小工具，用起来不要太爽 】
背景
最近工作上做了几个H5项目，因为统一框架都是Vue3+ts+Vant4，所以就只能使用Vant4版本的UI库，但是开发的过程中发现Vant官方的Form表单极其的不好用，所有就想到了element-plus-kit[1]的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！
点击关注公众号，“技术干货” 及时达！
