快速开始（SKILL）
将文件放到技能包目录下，并重启技能包服务。
如图所示发送如初始化vant4字典包给AI，AI将自动帮您创建字典包需要的文件，并配置好模拟数据，配置好后您可以直接使用。当然，如果要全面掌握字典包的使用，还是得详细阅读并理解文档中的内容。
注意
每个模型的能力可能不一样，所以AI帮您创建好的的文件可能出现一些小错误，如有错误请自行修改，基本上是不会有错误。
使用示例
初始化完成后，常规开发表单使用示例如下（复制可直接使用）：
vue
<script setup>
import { ref, nextTick } from "vue"
// 获取最终校验规则
import { getValidator } from "vue3-vant4-dict"
// 获取最终的校验规则
const validator = getValidator()
const formData = ref({
name: "",
gender: "",
birthday: "",
birthtime: "",
phone: "",
address: "",
fruits: [],
datetime: ""
})
const maxDate = new Date()
const minDate = new Date(new Date().getFullYear() - 120, 0, 1)
const formDataRef = ref(null)
const rules = ref({
name: [
{ required: true, message: "请输入姓名", trigger: "onBlur" },
{
validator: validator.name,
message: "请输入正确的姓名",
trigger: "onBlur"
}
],
sex: [{ required: true, message: "请选择性别", trigger: "onChange" }],
birthday: [{ required: true, message: "请选择出生日期", trigger: "onChange" }],
birthtime: [{ required: true, message: "请选择出生时间", trigger: "onChange" }],
phone: [
{ required: true, message: "请输入手机号", trigger: "onBlur" },
{
validator: validator.mobile,
message: "请输入正确的手机号",
trigger: "onBlur"
}
]
})
const reset = async () => {
formData.value = {
name: "",
gender: "",
birthday: "",
birthtime: "",
phone: "",
address: "",
fruits: [],
datetime: ""
}
await nextTick()
formDataRef.value.resetValidation()
}
const submit = async () => {
formDataRef.value
.validate()
.then(() => {
console.log("校验通过")
})
.catch(err => {
console.log("校验失败", err)
})
}
</script>
<template>
<div class="form-demo">
<van-form ref="formDataRef" input-align="right" :model="formData" label-align="left" error-message-align="right">
<dict-field label="姓名" v-model="formData.name" required name="name" :rules="rules['name']" maskType="name" clearable placeholder="请输入姓名"></dict-field>
<dict-select label="性别" title="选择性别" v-model="formData.gender" required name="sex" :rules="rules['sex']" dictType="SEX_DEMO" clearable placeholder="请选择性别"></dict-select>
<dict-date
label="出生日期"
title="选择出生日期"
v-model="formData.birthday"
required
name="birthday"
:rules="rules['birthday']"
:minDate="minDate"
:maxDate="maxDate"
clearable
placeholder="请选择出生日期"
></dict-date>
<dict-time label="出生时间" title="选择出生时间" v-model="formData.birthtime" required name="birthtime" :rules="rules['birthtime']" clearable placeholder="请选择出生时间"></dict-time>
<dict-field label="手机号" v-model="formData.phone" required name="phone" :rules="rules['phone']" maskType="mobile" clearable placeholder="请输入手机号"></dict-field>
<dict-cascader label="籍贯" title="选择籍贯" lastLevel maxLevel="2" v-model="formData.address" dictType="AREA_DEMO" clearable placeholder="请选择籍贯"></dict-cascader>
<dict-multiple-select label="喜欢的水果" title="选择喜欢的水果" v-model="formData.fruits" dictType="FRUTS_DEMO" clearable placeholder="请选择喜欢的水果"></dict-multiple-select>
<dict-datetime label="日期时间" title="选择日期时间" v-model="formData.datetime" clearable placeholder="请选择日期时间"></dict-datetime>
</van-form>
<div class="tip-box">
<van-tag type="warning">还很多组件，就不全列举了，感兴趣请阅读<a class="link" href="/" target="_blank">vant3-vant4-dict官网</a></van-tag>
</div>
<div class="btn-box">
<van-button type="primary" plain size="large" @click="reset">重置</van-button>
<van-button type="primary" size="large" @click="submit">提交</van-button>
</div>
</div>
</template>
<style scoped>
.form-demo {
padding-bottom: 88px;
}
.link {
color: blue;
}
.tip-box {
display: flex;
align-items: center;
justify-content: center;
margin-top: 12px;
}
.btn-box {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 12px;
display: flex;
gap: 12px;
}
</style>使用动态组件渲染表单示例如下（复制可直接使用）：
javascript
<script setup>
import { ref } from 'vue'
const formData = ref({
name: '',
gender: '',
birthday: '',
birthtime: '',
phone: '',
address: '',
fruits: [],
datetime: ''
})
const maxDate = new Date()
const minDate = new Date(new Date().getFullYear() - 120, 0, 1)
const componentList = ref([
{
compName: "dict-field",
isFormData: true,
fieldName: "name",
props: {
label: "姓名",
clearable: true,
maskType: "name",
rules: [
{ required: true, message: '请输入姓名', trigger: 'onBlur' },
{ validator: "name", message: '请输入正确的姓名', trigger: 'onBlur' }
],
modelValue: "",
}
},
{
compName: "dict-select",
isFormData: true,
fieldName: "sex",
props: {
label: "性别",
dictType: "SEX_DEMO",
clearable: true,
maskType: "name",
title: "选择性别",
rules: [
{ required: true, message: '请选择性别', trigger: 'onChange' }
],
modelValue: "",
}
},
{
compName: "dict-date",
isFormData: true,
fieldName: "birthday",
props: {
label: "出生日期",
clearable: true,
title: "选择出生日期",
minDate: minDate, // 支持字符串 如果组件数据为后端接口返回，此值可由接口计算后返回如何日期格式的字符串即可 如 1900-01-01
maxDate: maxDate, // 支持字符串 如果组件数据为后端接口返回，此值可由接口计算后返回如何日期格式的字符串即可 如 2026-12-31
rules: [
{ required: true, message: '请选择出生日期', trigger: 'onChange' }
],
modelValue: "",
}
},
{
compName: "dict-time",
isFormData: true,
fieldName: "birthtime",
props: {
label: "出生时间",
clearable: true,
title: "选择出生时间",
rules: [
{ required: true, message: '请选择出生时间', trigger: 'onChange' }
],
modelValue: "",
}
},
{
compName: "dict-field",
isFormData: true,
fieldName: "phone",
props: {
label: "手机号",
clearable: true,
maskType: "mobile",
rules: [
{ required: true, message: '请输入手机号', trigger: 'onBlur' }
],
modelValue: "",
}
},
{
compName: "dict-cascader",
isFormData: true,
fieldName: "address",
props: {
label: "籍贯",
title: "选择籍贯",
maxLevel: "2",
lastLevel: true,
dictType: "AREA_DEMO",
clearable: true,
modelValue: "",
}
},
{
compName: "dict-multiple-select",
isFormData: true,
fieldName: "fruits",
props: {
label: "喜欢的水果",
title: "选择喜欢的水果",
dictType: "FRUTS_DEMO",
clearable: true,
modelValue: [],
}
},
{
compName: "dict-datetime",
isFormData: true,
fieldName: "datetime",
props: {
label: "日期时间",
clearable: true,
title: "选择日期时间",
modelValue: "",
}
},
{
compName: "div",
isFormData: false,
props: {
class: "tip-box",
slotList: [
{
slotName: "default",
render: "<span :class=\"['van-tag','van-tag--warning' ]\">还很多组件，就不全列举了，感兴趣请阅读<a class=\"link\" href=\"https://www.xiaobu.host/vue3-vant4-dict/components/dynamic-components.html/\" target=\"_blank\">vant3-vant4-dict官网</a></span>"
}
],
}
},
{
compName: "dict-buttons",
isFormData: false,
props: {
col: 2,
class: "btn-box",
buttonList: [
{
text: "重置",
class: "xioabu",
actionType: "reset",
},
{
text: "提交",
type: "primary",
actionType: "submit",
}
]
}
},
])
const handlePass = (fromData) => {
alert(JSON.stringify(fromData))
}
const handleFail = (errors) => {
console.log(errors)
}
</script>
<template>
<div class="form-demo">
<dict-dynamic-components v-model="formData" :componentList="componentList" label-align="left" input-align="right"
error-message-align="right" @pass="handlePass" @fail="handleFail"></dict-dynamic-components>
</div>
</template>
<style scoped>
.form-demo{
padding-bottom: 88px;
}
:deep(.link) {
color: blue;
}
:deep(.tip-box) {
display: flex;
align-items: center;
justify-content: center;
margin-top: 12px;
width: 100%;
}
:deep(.btn-box) {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 12px;
display: flex;
gap: 12px;
}
</style>