前言
最近在用vant做关于移动端的项目,由于表单字段太多,不想写直接写到template中,这样太繁琐了,所以我们以把表单弄成schema配置形式:
// data.ts
import type { ItemSchema } from '@/typing/helper';
import { StudentField } from '@/components';
import { getDictTextByCode } from '@/data/dict';
import {
textField,
switchField,
dividerField,
dictField,
selectField,
entityField,
} from '@/helpers';
export const baseFormSchema: ItemSchema[] = [
dividerField('普通文本'),
textField('name', '姓名', { required: true }),
dividerField('文本域'),
textField('address', '地址', { type: 'textarea' }),
dividerField('是否字段'),
switchField('isMarried', '是否婚配'),
dividerField('字典选择'),
dictField('marital', '婚姻情况', 'marital'),
dividerField('select'),
selectField('way', '交通工具', [
{ text: '汽车', code: 1 },
{ text: '步行', code: 2 },
]),
dividerField('实体选择(学生)'),
entityField('studentId', '学生', StudentField, {
change(record) {
console.log(record);
},
}),
];
form组件使用:
<template>
<div class="content">
<code>
<pre>{{ formValue }}</pre>
</code>
<TwiceForm :form-schema="baseFormSchema" v-model="formValue"></TwiceForm>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { TwiceForm } from '@/components';
import { baseFormSchema } from '@/views/form/data';
const formValue = ref({
name: '',
age: '',
address: '',
isMarried: true,
marital: -1,
way: 1,
studentId: '',
});
</script>
<style lang="less" scoped></style>
就是通过数据驱动生成表单(效果如下)。
也可以戳链接亲自体验:vant_twice_form
小成果
这样不仅表单字段配置起来方便,更能解决一些业务交互上的一些需求:
比如根据一个字段值判断是否需要填写后续字段
又比如选实体字段时把带回来的记录显示到表单中:
下面就看看我是怎么做的吧。文章来源:https://www.toymoban.com/news/detail-545697.html
实现步骤(以文本字段为例):
- 根据字段类型封装生成该类型schema的方法
import { merge } from 'lodash-es';
import type { Props, ItemSchema } from '@/typing/helper';
import { Field } from 'vant';
/**
* 文本字段
* @param field
* @param label
* @param props
*/
export function textField(
field: string,
label: string,
props?: Props
): ItemSchema {
return {
component: Field,
props: merge(
{
field,
label,
placeholder: `请输入${label}`,
rules: props?.required
? [{ required: true, message: `${label}不能为空` }]
: [],
},
props
),
};
}
- 把生成的schema列表遍历出来
<template>
<Form ref="formRef">
<template v-for="schema in formSchema" :key="schema">
<template v-if="schema?.props?.field">
<template v-if="calcShow(schema)">
<component
:is="schema.component"
v-bind="schema.props"
v-model="formValue[schema.props.field]"
@change="
(record) =>
schema?.props?.change &&
schema?.props?.change(record, formValue, formSchema)
"
/>
</template>
</template>
<component v-else :is="schema.component" v-bind="schema.props" />
</template>
</Form>
</template>
<script setup lang="ts">
import { ref, unref, watch, computed } from 'vue';
import { Form } from 'vant';
import type { ItemSchema } from '@/typing/helper';
const props = defineProps<{
formSchema: ItemSchema[];
modelValue: any;
}>();
const formValue = ref(props.modelValue);
const formRef = ref();
const emits = defineEmits<{
(e: 'update:modelValue', params: any): void;
(e: 'submit', params: any): void;
}>();
watch(formValue.value, (value) => {
emits('update:modelValue', unref(value));
});
const calcShow = computed(
() => (schema: ItemSchema) => schema?.props?.show === false ? false : true
);
defineExpose({
// 表单校验
validate: async () => await formRef.value.validate(),
// 设置值(清空、回显)
setValue: function <T>(value: T) {
formValue.value = value;
},
});
</script>
<style lang="less" scoped></style>
- 配置schema
import {
textField,
dividerField,
} from '@/helpers';
export const baseFormSchema: ItemSchema[] = [
dividerField('普通文本'),
textField('name', '姓名', { required: true }),
]
- 使用form组件
<template>
<div class="content">
<code>
<pre>{{ formValue }}</pre>
</code>
<TwiceForm :form-schema="baseFormSchema" v-model="formValue"></TwiceForm>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { TwiceForm } from '@/components';
import { baseFormSchema } from '@/views/form/data';
const formValue = ref({
name: '',
age: '',
address: '',
isMarried: true,
marital: -1,
way: 1,
studentId: '',
});
</script>
<style lang="less" scoped></style>
就先记录到这里,后续更新追记。感兴趣可以仓库看源码;文章来源地址https://www.toymoban.com/news/detail-545697.html
到了这里,关于【vant】打开vant表单的正确形式(基于vant表单的二次封装)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!