From 787d51f3751c6a5a9b1c32d526e3d52b733ea7c6 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Mon, 7 May 2018 18:40:25 +0800 Subject: [PATCH] feat: form --- components/form/demo/index.vue | 98 +++++++++++ components/form/demo/validate-static.md | 178 ++++++++++++++++++++ components/form/demo/without-form-create.md | 67 ++++++++ components/form/index.en-US.md | 21 --- components/form/index.zh-CN.md | 25 +-- components/input-number/index.jsx | 5 +- components/vc-form/src/createBaseForm.jsx | 4 +- components/vc-input-number/src/index.js | 5 +- site/routes.js | 2 +- 9 files changed, 354 insertions(+), 51 deletions(-) create mode 100644 components/form/demo/index.vue create mode 100644 components/form/demo/validate-static.md create mode 100644 components/form/demo/without-form-create.md diff --git a/components/form/demo/index.vue b/components/form/demo/index.vue new file mode 100644 index 000000000..d16bec187 --- /dev/null +++ b/components/form/demo/index.vue @@ -0,0 +1,98 @@ + diff --git a/components/form/demo/validate-static.md b/components/form/demo/validate-static.md new file mode 100644 index 000000000..81435097b --- /dev/null +++ b/components/form/demo/validate-static.md @@ -0,0 +1,178 @@ + +#### 自定义校验 +我们提供了 `validateStatus` `help` `hasFeedback` 等属性，你可以不需要使用 `Form.create` 和 `getFieldDecorator`，自己定义校验的时机和内容。 +1. `validateStatus`: 校验状态，可选 'success', 'warning', 'error', 'validating'。 +2. `hasFeedback`：用于给输入框添加反馈图标。 +3. `help`：设置校验文案。 + + + +#### Customized Validation +We provide properties like `validateStatus` `help` `hasFeedback` to customize your own validate status and message, without using `Form.create` and `getFieldDecorator`. +1. `validateStatus`: validate status of form components which could be 'success', 'warning', 'error', 'validating'. +2. `hasFeedback`: display feed icon of input control +3. `help`: display validate message. + + +```html + + +``` + + + diff --git a/components/form/demo/without-form-create.md b/components/form/demo/without-form-create.md new file mode 100644 index 000000000..496719e18 --- /dev/null +++ b/components/form/demo/without-form-create.md @@ -0,0 +1,67 @@ + +#### 自行处理表单数据 +使用 `Form.create` 处理后的表单具有自动收集数据并校验的功能，但如果您不需要这个功能，或者默认的行为无法满足业务需求，可以选择不使用 `Form.create` 并自行处理数据。 + + + +#### Handle Form Data Manually +`Form.create` will collect and validate form data automatically. But if you don't need this feature or the default behaviour cannot satisfy your business, you can drop `Form.create` and handle form data manually. + + +```html + + +``` + + + diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 41504e7fb..a203b1d27 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -1,24 +1,3 @@ ---- -category: Components -type: Data Entry -cols: 1 -title: Form ---- - -Form is used to collect, validate, and submit the user input, usually contains various form items including checkbox, radio, input, select, and etc. - -## Form - -You can align the controls of a `form` using the `layout` prop： - -- `horizontal`：to horizontally align the `label`s and controls of the fields. (Default) -- `vertical`：to vertically align the `label`s and controls of the fields. -- `inline`：to render form fields in one line. - -## Form fields - -A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more. -A form field is defined using ``. ```jsx diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index b0629f433..2a104b59f 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -1,26 +1,3 @@ ---- -category: Components -subtitle: 表单 -type: Data Entry -cols: 1 -title: Form ---- - -具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。 - -## 表单 - -我们为 `form` 提供了以下三种排列方式： - -- 水平排列：标签和表单控件水平排列；（默认） -- 垂直排列：标签和表单控件上下垂直排列； -- 行内排列：表单项水平行内排列。 - -## 表单域 - -表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。 - -这里我们封装了表单域 `` 。 ```jsx @@ -36,7 +13,7 @@ title: Form | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性，直接传给 Form 即可。1.7.0 之后无需设置 | object | 无 | +| form | 经 `Form.create()` 包装过的组件会自带 `this.form` 属性，直接传给 Form 即可。无需手动设置 | object | 无 | | hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false | | layout | 表单布局(2.8 之后支持) | 'horizontal'\|'vertical'\|'inline' | 'horizontal' | | onSubmit | 数据验证成功后回调事件 | Function(e:Event) | | diff --git a/components/input-number/index.jsx b/components/input-number/index.jsx index 946eda0d6..1504bf6d0 100644 --- a/components/input-number/index.jsx +++ b/components/input-number/index.jsx @@ -7,7 +7,10 @@ export const InputNumberProps = { prefixCls: PropTypes.string, min: PropTypes.number, max: PropTypes.number, - value: PropTypes.number, + value: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.string, + ]), step: PropTypes.oneOfType([ PropTypes.number, PropTypes.string, diff --git a/components/vc-form/src/createBaseForm.jsx b/components/vc-form/src/createBaseForm.jsx index 107985c61..791098cd5 100644 --- a/components/vc-form/src/createBaseForm.jsx +++ b/components/vc-form/src/createBaseForm.jsx @@ -553,7 +553,7 @@ function createBaseForm (option = {}, mixins = []) { }, render () { - const { $listeners } = this + const { $listeners, $slots } = this const formProps = { [formPropName]: this.getForm(), } @@ -566,7 +566,7 @@ function createBaseForm (option = {}, mixins = []) { on: $listeners, ref: 'WrappedComponent', } - return + return {$slots.default} }, } if (Array.isArray(WrappedComponent.props)) { diff --git a/components/vc-input-number/src/index.js b/components/vc-input-number/src/index.js index 6ad44864b..0f14a71c1 100755 --- a/components/vc-input-number/src/index.js +++ b/components/vc-input-number/src/index.js @@ -491,8 +491,9 @@ export default { const inputDisplayValueFormat = this.formatWrapper(inputDisplayValue) const isUpDisabled = !!upDisabledClass || disabled || readOnly const isDownDisabled = !!downDisabledClass || disabled || readOnly + const { mouseenter = noop, mouseleave = noop, mouseover = noop, mouseout = noop } = this.$listeners const contentProps = { - on: this.$listeners, + on: { mouseenter, mouseleave, mouseover, mouseout }, class: classes, } const upHandlerProps = { @@ -578,7 +579,7 @@ export default { step={this.step} name={this.name} id={this.id} - onChange={this.onChange} + onInput={this.onChange} ref='inputRef' value={inputDisplayValueFormat} pattern={this.pattern} diff --git a/site/routes.js b/site/routes.js index 68eaf4483..13ca65b78 100644 --- a/site/routes.js +++ b/site/routes.js @@ -4,7 +4,7 @@ import Iframe from './components/iframe.vue' const AsyncTestComp = () => { const d = window.location.hash.replace('#', '') return { - component: import(`../components/form/demo/${d}`), + component: import(`../components/form/demo/test.vue`), } }