q-antd

v2.3.31

Published

2 years ago

双绑形式的antd。受控组件的双绑、Form表单验证

Downloads

2,877

0High
0Medium
0Low

shiyong.yin

antd q-antd Form Fields duplex mobx react

简介

q-antd是在antd的基础上，结合mobx，对antd中的表单元素进行二次改装和对Form的重写一个npm包，使得表单元素支持双工绑定，使得表单使用更简单，从而提高开发效率

q-antd最大的优势是：

各个表单元素是双绑的，不需要调用onChange函数手动处理变化后的赋值操作
q-antd的form在使用上比antd的form简单很多，而且form内置了不少自定义布局，能满足绝大数情况下的布局，实在满足不了，可使用manualLayout=true，自定义布局

安装

yarn add q-antd 安装之前需要项目中已经安装了antd

使用

Form

使用说明

使用Form组件和FormItem组件进行布局

使用Form的model属性和表单元素的duplex属性，进行数据的双绑。
使用Form的rules属性进行表单元素的校验
- 校验规则的写法参见async-validator
- 校验的触发，在各个规则中传入trigger属性，例如：trigger:'blur'或者trigger: ['blur', 'change']

使用示例

普通情况下

此情况下notice=observable({})，此时的search是mobx的对象

import mobx, { observable, action, transaction, spy } from 'mobx';

// 注意notice的定义
const notice = observable({
  alert: 1,
  phone: 1,
  phones: ['']
});
const noticeRule = observable({
  singlePhone: [
    { required: true, message: '必填', trigger: 'blur'},
    { ...rules.cellphone, trigger: ['blur', 'change']}
  ]
})
@observer
export default class Remind extends React.Component {
  render() {
    return (
      <Form model={notice} rules={noticeRule} ref={ref => this.remindForm = ref} labelWidth={80} labelPosition=":flex-start">
        <FormItem labelStyle={labelStyle} className="mb-13" label="弹窗提醒">
          <Select_ duplex="alert" style={{ width: 130 }}>
            <Option value={1}>开启</Option>
            <Option value={0}>关闭</Option>
          </Select_>
        </FormItem>
        <FormItem labelStyle={labelStyle} className="mb-13" label="电话提醒">
          <Select_ duplex="phone" style={{ width: 130 }}>
            <Option value={1}>开启</Option>
            <Option value={0}>关闭</Option>
          </Select_>
          {notice.phone === 1 &&
            <View clear mt={20}>
              {phones.map((item, i) => {
                return (
                  <View clear key={i} mb={i === phones.length - 1 ? 0 : 14}>
                    <FormItem prop="singlePhone" duplex={['phones', i]} labelWidth={0}>
                      <Input_ key={i} type_="vice" duplex={['phones', i]} style={{ width: 130 }} placeholder="请输入手机号" />
                    </FormItem>
                  </View>
                )
              })}
            </View>
          }
        </FormItem>
      </Form>
    )
  }
}

特殊情况下

此时的notice=observable.map({})，此时的search是mobx的map对象，在且仅在这种情况下才可以使用a.b.c

import mobx, { observable, action, transaction, spy } from 'mobx';

// 注意notice的定义
const notice=observable.map({
})
const noticeRule = observable({
  singlePhone: [
    { required: true, message: '必填', trigger: 'blur'},
    { ...rules.cellphone, trigger: ['blur', 'change']}
  ]
})
@observer
export default class Remind extends React.Component {
  render() {
    return (
      <Form model={notice} rules={noticeRule} ref={ref => this.remindForm = ref} labelWidth={80} labelPosition=":flex-start">
        <FormItem labelStyle={labelStyle} className="mb-13" label="弹窗提醒">
        
          {/* 注意duplex的取值 */}
          <Select_ duplex="a.b.c" style={{ width: 130 }}>
            <Option value={1}>开启</Option>
            <Option value={0}>关闭</Option>
          </Select_>
        </FormItem>
        <FormItem labelStyle={labelStyle} className="mb-13" label="电话提醒">

          {/* 注意duplex的取值 */}
          <Select_ duplex="b.c" style={{ width: 130 }}>
            <Option value={1}>开启</Option>
            <Option value={0}>关闭</Option>
          </Select_>
          {notice.phone === 1 &&
            <View clear mt={20}>
              {phones.map((item, i) => {
                return (
                  <View clear key={i} mb={i === phones.length - 1 ? 0 : 14}>
                    <FormItem prop="singlePhone" duplex={['phones', i]} labelWidth={0}>
                      <Input_ key={i} type_="vice" duplex={['phones', i]} style={{ width: 130 }} placeholder="请输入手机号" />
                    </FormItem>
                  </View>
                )
              })}
            </View>
          }
        </FormItem>
      </Form>
    )
  }
}

校验规则的使用说明

校验规则的使用分为两步

在Form上传入rules={noticeRule} 参见上面代码
在FormItem中传入prop="singlePhone"，如果是数组还需要传入duplex，duplex的取值和循环元素的取值一样，循环的元素注意加上key 参见上面代码

API

style,className等原有属性均支持

Form方法

方法 | 说明 | 用法 ---|---|---| resetFields | 重置表单默认值 | this.xxxFrom.resetFields() resetFieldsStyle| 重置校验过之后的样式 | this.xxxFrom.resetFieldsStyle() validate| 校验一项表单，,若 propName 参数为空，则校验全部组件，返回一个Promise实例，也支持传入回调函数处理 | this.xxxForm.validate(propName).then((valid)=>{}) 或者 this.xxxForm.validate(propName, (valid)=>{})

Form属性

方法 | 说明 | 类型 | 默认值 | 必须 ---|---|---|---|---| model | mobx的observable对象，存储表单的数据 | object | - | Y rules | mobx的observable对象或JS对象，验证表单的规则 | object | - | | inline | form表单的布局方式。设为true时，form的子元素按inline布局 | bool | false | | layout | FormItem整体、Action以及各个FormItem的布局,用法可为‘:flex:block’，未设置的那个值回去默认值第一个值表示FormItem整体的布局，可取值flex和block第二个值表示Action的布局，可取值flex和block第三个值表示各个FormItem的布局，可取值flex和block | string | 'flex:block:block' | | actionPosition | Action的位置，用法可为‘:flex-start’或‘bottom:’，未设置的那个值取默认值第一个值表示action相对于FormItem的位置，可取值right和bottom第二个值表示action局部的布局，有效值alignItem的值 | string | 'right:flex-end' | | labelPosition | FormItem中label的位置，用法可为‘::right’，未设置的那个值取默认值第一个值表示label的宏观位置，取值为top或者left第二个值表示label在垂直方向的布局，有效值是alignItems的值第三个是label在水平方向的布局，取值为textAlign的值 | string | 'left:center:right' | | fillCount | 每行FormItem的数量，如果最后一行FormItem数量<fillCount，会使用空的FormItem填充，以保证布局的对齐 | number | 1 | | manualLayout | 手动布局，设为true时，上面的inline,layout,actionPosition,lablePosition,fillCount不再生效 | bool | false | | labelWidth | label的宽度，设为0时，会被替换为'auto' | number | 0 | | needCls | 设为false时，不再使用q-antd自带的样式className——i-form | bool | true | |

FormItem属性

方法 | 说明 | 类型 | 默认值 | 必须 ---|---|---|---|---| label | FormItem各项名称 | string | - | | labelStyle | label的style | object | - | | labelWidth | label的宽度 | number | 0 | | prop | 表单验证时候用到，若无此属性，不验证。取值为Form重rules属性中的key | number | - | |

Action属性

方法 | 说明 | 类型 | 默认值 | 必须 ---|---|---|---|---|

Fields

特殊说明

q-antd中的所有表单元素命名规则都是在antd的命名之后加上_。比如Input在q-antd中就叫Input_;Input.TextArea在q-antd中就叫Input_.TextArea_
由于有些antd组件的源码存在缺陷，故做如下特殊说明
- Mention_双绑的时候有bug，可使用antd的Mention
- Select_, TreeSelect_双绑的值当且仅当为none(void 0的别名)的时候才显示placeholder

使用说明

每个元素都有一个duplex属性，此属性与Model或者Form组件的model属性结合起来完成双绑，duplex的值为model对象的key

Props

Input_等输入框元素支持以下属性

onKeyUp-enter

onKeyUp-13和onKeyUp-enter是一样的效果，enter是13的别名，免除了记keyCode的麻烦

除了onKeyUp时间，所有react(html)支持的事件都支持，比如onKeyDown,onKeyPress等等

onKeyUp事件，-enter为__按键修饰符__(参考vue按键修饰符)，当输入回车的时候执行onKeyUp的回调

类型 | 默认值 ---|--- function|-

支持按键修饰符列表

除了以下的别名，可以通过qAntd.config.keyCodes.enter=13进行扩展

别名 | keyCode ---|--- enter|13 right| 39 left| 37 up| 38 down| 40 del| 46 tab| 9 back| 8 esc| 27

使用示例

import React from 'react';
import mobx, { observable, action } from 'mobx';
import { observer, Provider } from 'mobx-react';
import { Radio, Select, TreeSelect } from 'antd';
const { Option } = Select;
const { TreeNode } = TreeSelect;
import {
  Input_,
  InputNumber_,
  Radio_,
  Checkbox_,
  AutoComplete_,
  Cascader_,
  DatePicker_,
  Select_,
  Slider_,
  Switch_,
  TreeSelect_,
  TimePicker_,
  Transfer_,
  // Mention_, //Mention_的双绑有问题，antd的实现有问题
  Rate_,
  Model,
  Form,
  View
} from 'q-antd';
const { MonthPicker_, WeekPicker_, RangePicker_ } = DatePicker_;
const cascaderOptions = [{
  value: 'zhejiang',
  label: 'Zhejiang',
  children: [{
    value: 'hangzhou',
    label: 'Hangzhou',
    children: [{
      value: 'xihu',
      label: 'West Lake'
    }]
  }]
}, {
  value: 'jiangsu',
  label: 'Jiangsu',
  children: [{
    value: 'nanjing',
    label: 'Nanjing',
    children: [{
      value: 'zhonghuamen',
      label: 'Zhong Hua Men'
    }]
  }]
}];
const mockData = [];
for (let i = 0; i < 20; i++) {
  mockData.push({
    key: i.toString(),
    title: `content${i}`,
    description: `description of content${i}`,
    disabled: i % 3 < 1
  });
}
const targetKeys = mockData
  .filter(item => +item.key % 3 > 1)
  .map(item => item.key);
const search = observable({
  a: 1,
  aa: '我是TextArea',
  aaa: 1,
  b: true,
  c: '1',
  cc: 'Apple',
  d: true,
  e: ['Apple'],
  suggest: '',
  area: [],
  date: '2014-07-02',
  month: '2014-07-02',
  week: '2014-07-02',
  rangeStart: '2017-10-11',
  rangeEnd: '2018-01-10',
  inputNumber: 8,
  mention: '@afc163 ',
  rate: 1,
  radioGroup: 'Apple',
  radio: false,
  select: none,
  slider: 68,
  sliderRange: [10, 50],
  switch: true,
  treeSelect: none,
  time: '00:00:00',
  transfer: ['2', '5', '8']
});
@observer
export default class QAntd extends React.Component {
  render() {
    return (
      <Model model={search}>
        <View ml={30} mr={30}>
          <div>{JSON.stringify(mobx.toJS(search))}</div><br />
          
          <View clear block><Input_ duplex="a" placeholder="没有form的表单" /></View> Input_的使用<br />
          
          <View clear block><Input_.TextArea_ duplex="aa" rows={2} placeholder="没有form的表单" /></View> Input_.TextArea_的使用<br />
          
          <View clear block><InputNumber_ duplex="aaa" rows={2} placeholder="没有form的表单" /></View> InputNumber_的使用<br />
          
          <Radio_ duplex="b" >我是一个人</Radio_>Radio_的使用，单个Radio可将b设为true或者false <br />
          
          <Radio_.Group_ duplex="c">
            <Radio value="1">1</Radio>
            <Radio value="2">2</Radio>
          </Radio_.Group_> Radio_.Group_的使用之用法一<br />
          
          <Radio_.Group_ duplex="cc" options={[
            { label: 'Apple', value: 'Apple' },
            { label: 'Pear', value: 'Pear' },
            { label: 'Orange', value: 'Orange' }
          ]} /> Radio_.Group_的使用之用法二<br />
          
          <Checkbox_ duplex="d">Banana</Checkbox_> Checkbox_的使用<br />
          
          <Checkbox_.Group_ options={[{ label: 'Apple', value: 'Apple' }, { label: 'Pear', value: 'Pear' }]} duplex="e" /> Checkbox_.Group_的使用<br />
          
          <Select_ style={{ width: 400 }} duplex="select" placeholder="select的双绑值为none的时候才能显示placeholder" >
            <Option value="Jack">Jack</Option>
            <Option value="ruler">ruler</Option>
          </Select_> Select_的使用<br />
          
          <AutoComplete_ duplex="suggest" dataSource={['1', '2', '3']}></AutoComplete_> AutoComplete_的使用 <br />
          
          <Cascader_ style={{ width: 400 }} duplex="area" options={cascaderOptions}></Cascader_> Cascader_的使用 <br />
          
          <DatePicker_ duplex="date" /> DatePicker_的使用 <br />
          
          <MonthPicker_ duplex="month" /> MonthPicker_的使用<br />
          
          <WeekPicker_ duplex="week" /> WeekPicker_的使用<br />
          
          <RangePicker_ duplex="rangeStart, rangeEnd" /> RangePicker_的使用 <br />
          
          <Rate_ duplex="rate" /> Rate_的使用<br />
          
          <Slider_ duplex="slider" min={0} max={100} /> Slider_的使用<br />
          
          <Slider_ range duplex="sliderRange" min={0} max={100} /> Slider_中range的使用<br />
          
          <Switch_ range duplex="switch" min={0} max={100} /> Switch_的使用<br />
          
          <TreeSelect_ treeDefaultExpandAll duplex="treeSelect" placeholder="Please select" >
            <TreeNode value="parent 1" title="parent 1" key="0-1">
              <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
                <TreeNode value="leaf1" title="my leaf" key="random" />
                <TreeNode value="leaf2" title="your leaf" key="random1" />
              </TreeNode>
              <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
                <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
              </TreeNode>
            </TreeNode>
          </TreeSelect_> TreeSelect_的使用<br />
          
          <TimePicker_ duplex="time" /> TimePicker_的使用<br />
          
          <Transfer_
            dataSource={mockData}
            duplex="transfer"
          /> Transfer_的使用<br />
        </View>
      </Model>
    )
  }
}

Flexbox

对flex布局的简单封装，需要Flexbox, Flex, Block三个组件一起使用

示例

import {Flexbox} from 'q-antd'
const {Flex, Block} = Flexbox;

export default class Demo extends React.Component {
  render() {
    return (
      <Flexbox>
        <Flex flex={3}>
          什么是服务器端渲染(SSR)？<br/>
          Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。<br/>

          服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。
        </Flex>
        <Flex>
          这么牛
        </Flex>
        <Block>
          OK
        </Block>
      </Flexbox>
    )
  }
}

Flexbox属性

除了以下属性，也支持style属性

alignItems

同style的alignItems

类型 | 默认值 ---|--- string| -

jusitfyContent

同style的jusitfyContent

类型 | 默认值 ---|--- string| -

flexDirection

同style的flexDirection

类型 | 默认值 ---|--- string| -

Flex属性

flex

同style的flex

类型 | 默认值 ---|--- number| 1

Block属性

View

对div标签的升级，支持属性定义样式

示例

export default class Demo extends React.Component{
  render(){
    return(
      <View ml={20} mr={20} paddingTop={10} borderWidth={2} block clear>
        xxx
      </View>
    )
  }
}

Props

除了以下属性，同时支持style属性以及具体的style的属性

ml

margin-left缩写类型 | 默认值 ---|--- number|-

mr

maring-right缩写类型 | 默认值 ---|--- number|-

pl

padding-left缩写类型 | 默认值 ---|--- number|-

pr

padding-right缩写类型 | 默认值 ---|--- number|-

type

View类型，有效值为oneOf([hp-20,hp-30,vp-20,vp-30]) 类型 | 默认值 ---|--- string|hp-20

block

View表现为inline-block 类型 | 默认值 ---|--- bool|false

clear

取消type的默认值类型 | 默认值 ---|--- bool|false

Text

文字标签

示例

export default class Demo extends React.Component{
  render(){
    return(
      <Text size="small" type="dark" bold italic ml={20}>
        提交
      </Text>
    )
  }
}

Props

除了以下属性，同时支持style属性以及具体的style的属性

ml

margin-left缩写类型 | 默认值 ---|--- number|-

mr

maring-right缩写类型 | 默认值 ---|--- number|-

pl

padding-left缩写类型 | 默认值 ---|--- number|-

pr

padding-right缩写类型 | 默认值 ---|--- number|-

type

Text类型，有效值为

normal
dark
primary
primary-deep
warning
error
success
room-number
remark
main

类型 | 默认值 ---|--- string|normal

size

字体大小，有有效值为

small
normal
large

类型 | 默认值 ---|--- string|normal

bold

是否为粗体

类型 | 默认值 ---|--- bool|false

italic

是否为斜体

类型 | 默认值 ---|--- bool|false

A

A标签模拟button标签，由于antd的Button当为两个汉字的时候，两个汉字中间会有间隙

示例

export default class Demo extends React.Component{
  render(){
    return(
      <A onClick={e=>1}>
        提交
      </A>
    )
  }
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

简介

安装

使用

Form

使用说明

使用示例

普通情况下

特殊情况下

校验规则的使用说明

API

Form方法

Form属性

FormItem属性

Action属性

Fields

特殊说明

使用说明

Props

onKeyUp-enter

支持按键修饰符列表

使用示例

Flexbox

示例

Flexbox属性

alignItems

jusitfyContent

flexDirection

Flex属性

flex

Block属性

View

示例

Props

ml

mr

pl

pr

type

block

clear

Text

示例

Props

ml

mr

pl

pr

type

size

bold

italic

A

示例