`@forzoom/form-renderer`是表单生成的基础，通过向设置表单配置，其提供的`Renderer`组件能够将表单渲染出来。
npm install @forzoom/form-renderer@forzoom/form-renderer是表单生成的基础，通过向设置表单配置，其提供的Renderer组件能够将表单渲染出来。
具体的表单中的每一项，称为一个Section，因为Section的种类太过丰富，所以@forzoom/form-renderer本身不提供任何的Section，而是由一些其他的库来提供，这样可以做到按需使用。
以下是几个提供Section的库，目前只有移动端的样式：@forzoom/item-form提供了一个看上去不那么紧凑的表单组件，单页能够容纳的信息较少。@forzoom/compact-form提供了样式较为紧凑的表单组件。
下面是一个简单的例子，其中的代码基本是使用@forzoom/form-renderer的固定模板。
``typescript
import { FormRendererComponent, Renderer } from '@forzoom/form-renderer';
import { FormPageMeta } from '@forzoom/form-renderer/types/form';
import { ItemFormSectionMeta } from '@forzoom/item-form/types/form';
import { Toast } from 'vant';
@Component({
name: 'Page',
components: {
Renderer,
},
template:
,
})
class Page extends Vue {
public form: any = {
avatar: null,
}; public get meta(): Array> {
const sections: ItemFormSectionMeta[] = [
{
type: 'ItemUploader',
key: 'avatar',
titleComponent: false,
props: {
title: '头像',
httpRequest: async (image) => {
const rdata = await store.dispatch('upload', {
mediaId: image.key,
type: 'avatar',
});
return rdata.data;
},
},
validates: [
{ trigger: 'validate', required: true, message: '请上传头像' },
],
},
];
const pages: FormPageMeta[] = [
{
sections,
},
];
return pages;
}
public onError(section: any, rule: any) {
if (rule.message) {
Toast(rule.message);
}
}
/**
* 点击提交
*/
public async onClickSubmit() {
const vm = this;
// @ts-ignore
const $renderer = vm.$refs.form as FormRendererComponent;
if (!$renderer.isLastPage()) {
$renderer.nextPage();
} else {
if ($renderer.validate()) {
// 创建
const createRdata = await store.dispatch('create', form);
}
}
}
}
`$3
$3
通过为
配置encode和decode参数，可以在数据传入/传出组件时对于数据进行操作。`typescript
// @example 对从组件中传出的数据，也就是用户输入的“收货人姓名”，删除前后的空格
const trim = (value: string) => value ? value.trim() : '';
const section = {
type: 'CompactInput',
key: 'name',
props: {
placeholder: '收货人姓名',
textAlign: 'left',
},
decode: trim,
validates: [
{ required: true, message: '请输入收货人姓名' },
],
};
`$3
除了使用
和@forzoom/compact-form之外，还可以根据需要自定义Section。$3
1. 使用SFC方式造成
Section`组件库文件过大