@forzoom/form-renderer NPM

使用

@forzoom/form-renderer是表单生成的基础，通过向设置表单配置，其提供的Renderer组件能够将表单渲染出来。

具体的表单中的每一项，称为一个Section，因为Section的种类太过丰富，所以@forzoom/form-renderer本身不提供任何的Section，而是由一些其他的库来提供，这样可以做到按需使用。

以下是几个提供Section的库，目前只有移动端的样式： @forzoom/item-form提供了一个看上去不那么紧凑的表单组件，单页能够容纳的信息较少。 @forzoom/compact-form提供了样式较为紧凑的表单组件。

例子

下面是一个简单的例子，其中的代码基本是使用@forzoom/form-renderer的固定模板。

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: `
        <div>
            <Renderer :meta="meta" :form.sync="form" @error="onError" />
        </div>
    `,
})
class Page extends Vue {
    public form: any = {
        avatar: null,
    };

    public get meta(): Array<FormPageMeta<ItemFormSectionMeta>> {
        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);
            }
        }
    }
}

表单检查

数据操作

通过为section配置encode和decode参数，可以在数据传入/传出组件时对于数据进行操作。

// @example 对从组件中传出的数据，也就是用户输入的“收货人姓名”，删除前后的空格
const trim = (value: string) => value ? value.trim() : '';
const section = {
    type: 'CompactInput',
    key: 'name',
    props: {
        placeholder: '收货人姓名',
        textAlign: 'left',
    },
    decode: trim,
    validates: [
        { required: true, message: '请输入收货人姓名' },
    ],
};