Vant 又一神器 Vant4-kit 来啦！！！ 点击关注公众号，“技术干货”及时达！ 又一神器 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 我是一个自定义 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标签的html片段/h4'})const formOptions = refXFormItemOption([ {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-pickerjs部分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！ 点击关注公众号，“技术干货”及时达！ 阅读原文