Introducing Vant4-kit: A Mobile UI Component Library for Vue3+TypeScript

Vant4-kit is a newly released mobile UI component library built on Vue 3, TypeScript, and Vant4, created to address the limitations of Vant's native Form component by offering richer, more flexible form solutions.

Background

During recent H5 projects the author needed a consistent framework (Vue3+ts+Vant4) and found Vant's Form component cumbersome. Inspired by the QForm component from element-plus-kit, the author explored Vant's source code and developed Vant4-kit.

Features

The library adds a date‑time picker component XDatetimePicker and a composite form component XForm . XForm supports 20 different field types, including 8 native Vant components, 3 composite selectors, and 4 common scenario components, all with demo configurations.

XForm Example

The following HTML demonstrates how to use XForm with custom slots:

<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>

The corresponding JavaScript defines the form model and the array of field options:

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 Example

XDatetimePicker fills the gap left by Vant's native picker components when selecting date‑time ranges. The usage is straightforward:

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

The formatter adds Chinese units to each column:

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

const handleFormatter = (type, option) => {
  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
}

Both components support visibility control, validation rules, read‑only mode, and rich slot customization, making complex mobile forms easier to build.

Conclusion

The author encourages developers to try Vant4-kit, experiment with the provided demos, and submit issues or feedback for further improvement.