@alitajs/dform

移动端的表单方案

表单组件

封装常用的表单组件，将 antd-mobile 的组件，改成受控组件。

官方用法

<InputItem
    {...getFieldProps('autofocus')}
    clear
    placeholder="auto focus"
    ref={el => this.autoFocusInst = el}
    >标题</InputItem>

使用@alitajs/dform

<NomarInput
    name='autofocus'
    placeholder="auto focus"
    title='标题'
    />

动态表单

<List renderHeader={() => 'Customize to focus'}>
    <InputItem
        {...getFieldProps('autofocus')}
        clear
        placeholder="auto focus"
        ref={el => this.autoFocusInst = el}
        >标题</InputItem>
    <Picker extra="请选择(可选)"
        data={district}
        title="Areas"
        {...getFieldProps('district', {
            initialValue: ['340000', '341500', '341502'],
            rules: [{ required:true, message: `请输入${title}` }],
        })}
        onOk={e => console.log('ok', e)}
        onDismiss={e => console.log('dismiss', e)}
        >
          <List.Item arrow="horizontal">Multiple & cascader</List.Item>
    </Picker>
</List>

使用@alitajs/dform

const formData = [
    {
      type: 'input',
      fieldProps: 'autofocus',
      required: true,
      placeholder: 'auto focus',
      title: '标题',
      inputType: 'text',
    },
    {
      type: 'select',
      fieldProps: 'district',
      required: true,
      placeholder: '请选择(可选)',
      title: 'Multiple & cascader',
      data: district,
    }
];
<DynamicForm data={formData} />

可视化编辑方案

方案灵感来源于 ava 的 autoChart，用法和触发条件一致，都是data为空且在开发状态的时候，显示编辑表单按钮。用户可以强制设定 isDev 来在任意环境中使用。

更多详情，请点击dform官网 欢迎交流。感谢！