github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add form doc

pull/165/head
tangjinzhou 2018-05-08 11:20:07 +08:00
parent 37c0ab2a1a
commit e9a96dd71d
26 changed files with 323 additions and 414 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/form/demo/advanced-search.md → components/form/demo/advanced-search.vue
View File

@ -10,7 +10,7 @@ Three columns layout is often used for advanced searching of data table.
Because the width of label is not fixed, you may need to adjust it by customizing its style. Because the width of label is not fixed, you may need to adjust it by customizing its style.
</us> </us>
```html
<script> <script>
import { Form } from 'vue-antd-ui' import { Form } from 'vue-antd-ui'
@ -128,7 +128,7 @@ export default {
padding-top: 80px; padding-top: 80px;
} }
</style> </style>
```

4
components/form/demo/coordinated.md → components/form/demo/coordinated.vue
View File

@ -8,7 +8,7 @@
Use `setFieldsValue` to set other control's value programmaticly. Use `setFieldsValue` to set other control's value programmaticly.
</us> </us>
```html
<script> <script>
import { Form } from 'vue-antd-ui' import { Form } from 'vue-antd-ui'
@ -76,7 +76,7 @@ const CoordinatedForm = {
export default Form.create()(CoordinatedForm) export default Form.create()(CoordinatedForm)
</script> </script>
```

4
components/form/demo/customized-form-controls.md → components/form/demo/customized-form-controls.vue
View File

@ -14,7 +14,7 @@ Customized or third-party form controls can be used in Form, too. Controls must
> * It must be a class component. > * It must be a class component.
</us> </us>
```html
<script> <script>
import { Form } from 'vue-antd-ui' import { Form } from 'vue-antd-ui'
@ -123,7 +123,7 @@ const Demo = {
export default Form.create()(Demo) export default Form.create()(Demo)
</script> </script>
```

4
components/form/demo/dynamic-form-item.md → components/form/demo/dynamic-form-item.vue
View File

@ -8,7 +8,7 @@
Add or remove form items dynamically. Add or remove form items dynamically.
</us> </us>
```html
<script> <script>
import { Form } from 'vue-antd-ui' import { Form } from 'vue-antd-ui'
@ -138,7 +138,7 @@ export default Form.create()(DynamicFieldSet)
} }
</style> </style>
```

4
components/form/demo/dynamic-rule.md → components/form/demo/dynamic-rule.vue
View File

@ -8,7 +8,7 @@
Perform different check rules according to different situations. Perform different check rules according to different situations.
</us> </us>
```html
<script> <script>
import { Form } from 'vue-antd-ui' import { Form } from 'vue-antd-ui'
@ -88,7 +88,7 @@ const DynamicRule = {
export default Form.create()(DynamicRule) export default Form.create()(DynamicRule)
</script> </script>
```

4
components/form/demo/form-in-modal.md → components/form/demo/form-in-modal.vue
View File

@ -8,7 +8,7 @@
When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fill in the form to create an item. When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fill in the form to create an item.
</us> </us>
```html
<script> <script>
import { Form } from 'vue-antd-ui' import { Form } from 'vue-antd-ui'
@ -99,7 +99,7 @@ export default {
}, },
} }
</script> </script>
```

6
components/form/demo/global-state.md → components/form/demo/global-state.vue
View File

@ -9,12 +9,12 @@
<us> <us>
#### Store Form Data into Upper Component #### Store Form Data into Upper Component
We can store form data into upper component. We can store form data into upper component.
**Note:** **Note:**
You must wrap field data with `Form.createFormField` in `mapPropsToFields`. You must wrap field data with `Form.createFormField` in `mapPropsToFields`.
The properties passed by the upper component must be declared in the props of `Form.create({ props: ...})`. The properties passed by the upper component must be declared in the props of `Form.create({ props: ...})`.
</us> </us>
```html
<script> <script>
import { Form } from 'vue-antd-ui' import { Form } from 'vue-antd-ui'
@ -86,7 +86,7 @@ export default {
margin-top: 24px; margin-top: 24px;
} }
</style> </style>
```

4
components/form/demo/horizontal-login.md → components/form/demo/horizontal-login.vue
View File

@ -8,7 +8,7 @@
Horizontal login form is often used in navigation bar. Horizontal login form is often used in navigation bar.
</us> </us>
```html
<script> <script>
import { Form } from 'vue-antd-ui' import { Form } from 'vue-antd-ui'
@ -76,7 +76,7 @@ const HorizontalLoginForm = {
export default Form.create()(HorizontalLoginForm) export default Form.create()(HorizontalLoginForm)
</script> </script>
```

120
components/form/demo/index.vue
View File

@ -1,25 +1,37 @@
<script> <script>
import AdvancedSearch from './advanced-search'
import AdvancedSearchString from '!raw-loader!./advanced-search'
import Coordinated from './coordinated'
import CoordinatedString from '!raw-loader!./coordinated'
import CustomizedFormControls from './customized-form-controls'
import CustomizedFormControlsString from '!raw-loader!./customized-form-controls'
import DynamicFormItem from './dynamic-form-item'
import DynamicFormItemString from '!raw-loader!./dynamic-form-item'
import DynamicRule from './dynamic-rule'
import DynamicRuleString from '!raw-loader!./dynamic-rule'
import FormInModal from './form-in-modal'
import FormInModalString from '!raw-loader!./form-in-modal'
import GlobalState from './global-state'
import GlobalStateString from '!raw-loader!./global-state'
import HorizontalLogin from './horizontal-login'
import HorizontalLoginString from '!raw-loader!./horizontal-login'
import Layout from './layout'
import LayoutString from '!raw-loader!./layout'
import NormalLogin from './normal-login'
import NormalLoginString from '!raw-loader!./normal-login'
import Register from './register'
import RegisterString from '!raw-loader!./register'
import TimeRelatedControls from './time-related-controls'
import TimeRelatedControlsString from '!raw-loader!./time-related-controls'
import ValidateOther from './validate-other'
import ValidateOtherString from '!raw-loader!./validate-other'
import ValidateStatic from './validate-static'
import ValidateStaticString from '!raw-loader!./validate-static'
import WithoutFormCreate from './without-form-create'
import WithoutFormCreateString from '!raw-loader!./without-form-create'
// import AdvancedSearch from './advanced-search' import CN from '../index.zh-CN'
// import Coordinated from './coordinated' import US from '../index.en-US'
// import CustomizedFormControls from './customized-form-controls'
// import DynamicFormItem from './dynamic-form-item'
// import DynamicRule from './dynamic-rule'
// import FormInModal from './form-in-modal'
// import GlobalState from './global-state'
// import HorizontalLogin from './horizontal-login'
// import Layout from './layout'
// import NormalLogin from './normal-login'
// import Register from './register'
// import TimeRelatedControls from './time-related-controls'
// import ValidateOther from './validate-other'
// import ValidateStatic from './validate-static'
// import WithoutFormCreate from './without-form-create'
import Test from './test'
import TestString from '!raw-loader!./test'
import CN from './../index.zh-CN'
import US from './../index.en-US'
const md = { const md = {
cn: `# Form 表单 cn: `# Form 表单
@ -70,27 +82,54 @@ export default {
cols: 1, cols: 1,
title: 'Form', title: 'Form',
render () { render () {
console.log(TestString)
return ( return (
<div> <div>
<md cn={md.cn} us={md.us} /> <md cn={md.cn} us={md.us} />
<Test /> <demo-container code={AdvancedSearchString}>
{/* <AdvancedSearch /> <AdvancedSearch />
<Coordinated /> </demo-container>
<CustomizedFormControls /> <demo-container code={CoordinatedString}>
<DynamicFormItem /> <Coordinated />
<DynamicRule /> </demo-container>
<FormInModal /> <demo-container code={CustomizedFormControlsString}>
<GlobalState /> <CustomizedFormControls />
<HorizontalLogin /> </demo-container>
<Layout /> <demo-container code={DynamicFormItemString}>
<NormalLogin /> <DynamicFormItem />
<Register /> </demo-container>
<TimeRelatedControls /> <demo-container code={DynamicRuleString}>
<ValidateStatic /> <DynamicRule />
<WithoutFormCreate /> </demo-container>
<ValidateOther /> <demo-container code={FormInModalString}>
*/} <FormInModal />
</demo-container>
<demo-container code={GlobalStateString}>
<GlobalState />
</demo-container>
<demo-container code={HorizontalLoginString}>
<HorizontalLogin />
</demo-container>
<demo-container code={LayoutString}>
<Layout />
</demo-container>
<demo-container code={NormalLoginString}>
<NormalLogin />
</demo-container>
<demo-container code={RegisterString}>
<Register />
</demo-container>
<demo-container code={TimeRelatedControlsString}>
<TimeRelatedControls />
</demo-container>
<demo-container code={ValidateStaticString}>
<ValidateStatic />
</demo-container>
<demo-container code={WithoutFormCreateString}>
<WithoutFormCreate />
</demo-container>
<demo-container code={ValidateOtherString}>
<ValidateOther />
</demo-container>
<api> <api>
<CN slot='cn' /> <CN slot='cn' />
<US /> <US />
@ -100,3 +139,8 @@ export default {
}, },
} }
</script> </script>
<style>
.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
max-width: 600px;
}
</style>

6
components/form/demo/layout.md → components/form/demo/layout.vue
View File

@ -8,7 +8,7 @@
There are three layout for form: `horizontal`, `vertical`, `inline`. There are three layout for form: `horizontal`, `vertical`, `inline`.
</us> </us>
```html
<template> <template>
<div> <div>
<a-form :layout="formLayout"> <a-form :layout="formLayout">
@ -43,7 +43,7 @@ There are three layout for form: `horizontal`, `vertical`, `inline`.
<a-button type='primary'>Submit</a-button> <a-button type='primary'>Submit</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
</div> </div>
</template> </template>
<script> <script>
@ -75,7 +75,7 @@ export default {
}, },
} }
</script> </script>
```

4
components/form/demo/normal-login.md → components/form/demo/normal-login.vue
View File

@ -8,7 +8,7 @@
Normal login form which can contain more elements. Normal login form which can contain more elements.
</us> </us>
```html
<script> <script>
import { Form } from 'vue-antd-ui' import { Form } from 'vue-antd-ui'
@ -73,7 +73,7 @@ export default Form.create()(NormalLoginForm)
width: 100%; width: 100%;
} }
</style> </style>
```

4
components/form/demo/register.md → components/form/demo/register.vue
View File

@ -8,7 +8,7 @@
Fill in this form to create a new account for you. Fill in this form to create a new account for you.
</us> </us>
```html
<script> <script>
import { Form } from 'vue-antd-ui' import { Form } from 'vue-antd-ui'
@ -254,7 +254,7 @@ const RegistrationForm = {
export default Form.create()(RegistrationForm) export default Form.create()(RegistrationForm)
</script> </script>
```

185
components/form/demo/test.vue
View File

@ -1,185 +0,0 @@
<script>
import { Form } from 'vue-antd-ui'
const Demo = {
methods: {
handleSubmit (e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values)
}
})
},
normFile (e) {
console.log('Upload event:', e)
if (Array.isArray(e)) {
return e
}
return e && e.fileList
},
},
render () {
const { getFieldDecorator } = this.form
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
}
return (
<a-form onSubmit={this.handleSubmit}>
<a-form-item
{...{ props: formItemLayout }}
label='Plain Text'
>
<span class='ant-form-text'>China</span>
</a-form-item>
<a-form-item
{...{ props: formItemLayout }}
label='Select'
hasFeedback
>
{getFieldDecorator('select', {
rules: [
{ required: true, message: 'Please select your country!' },
],
})(
<a-select placeholder='Please select a country'>
<a-select-option value='china'>China</a-select-option>
<a-select-option value='use'>U.S.A</a-select-option>
</a-select>
)}
</a-form-item>
<a-form-item
{...{ props: formItemLayout }}
label='Select[multiple]'
>
{getFieldDecorator('select-multiple', {
rules: [
{ required: true, message: 'Please select your favourite colors!', type: 'array' },
],
})(
<a-select mode='multiple' placeholder='Please select favourite colors'>
<a-select-option value='red'>Red</a-select-option>
<a-select-option value='green'>Green</a-select-option>
<a-select-option value='blue'>Blue</a-select-option>
</a-select>
)}
</a-form-item>
<a-form-item
{...{ props: formItemLayout }}
label='InputNumber'
>
{getFieldDecorator('input-number', { initialValue: 3 })(
<a-input-number min={1} max={10} />
)}
<span class='ant-form-text'> machines</span>
</a-form-item>
<a-form-item
{...{ props: formItemLayout }}
label='Switch'
>
{getFieldDecorator('switch', { valuePropName: 'checked' })(
<a-switch />
)}
</a-form-item>
<a-form-item
{...{ props: formItemLayout }}
label='Slider'
>
{getFieldDecorator('slider')(
<a-slider marks={{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }} />
)}
</a-form-item>
<a-form-item
{...{ props: formItemLayout }}
label='Radio.Group'
>
{getFieldDecorator('radio-group')(
<a-radio-group>
<a-radio value='a'>item 1</a-radio>
<a-radio value='b'>item 2</a-radio>
<a-radio value='c'>item 3</a-radio>
</a-radio-group>
)}
</a-form-item>
<a-form-item
{...{ props: formItemLayout }}
label='Radio.Button'
>
{getFieldDecorator('radio-button')(
<a-radio-group>
<a-radio-button value='a'>item 1</a-radio-button>
<a-radio-button value='b'>item 2</a-radio-button>
<a-radio-button value='c'>item 3</a-radio-button>
</a-radio-group>
)}
</a-form-item>
<a-form-item
{...{ props: formItemLayout }}
label='Rate'
>
{getFieldDecorator('rate', {
initialValue: 3.5,
})(
<a-rate allowHalf/>
)}
</a-form-item>
<a-form-item
{...{ props: formItemLayout }}
label='Upload'
extra='longgggggggggggggggggggggggggggggggggg'
>
{getFieldDecorator('upload', {
valuePropName: 'fileList',
getValueFromEvent: this.normFile,
})(
<a-upload name='logo' action='/upload.do' listType='picture'>
<a-button>
<a-icon type='upload' /> Click to upload
</a-button>
</a-upload>
)}
</a-form-item>
<a-form-item
{...{ props: formItemLayout }}
label='Dragger'
>
<div class='dropbox'>
{getFieldDecorator('dragger', {
valuePropName: 'fileList',
getValueFromEvent: this.normFile,
})(
<a-upload-dragger name='files' action='/upload.do'>
<p class='ant-upload-drag-icon'>
<a-icon type='inbox' />
</p>
<p class='ant-upload-text'>Click or drag file to this area to upload</p>
<p class='ant-upload-hint'>Support for a single or bulk upload.</p>
</a-upload-dragger>
)}
</div>
</a-form-item>
<a-form-item
wrapperCol={{ span: 12, offset: 6 }}
>
<a-button type='primary' htmlType='submit'>Submit</a-button>
</a-form-item>
</a-form>
)
},
}
export default Form.create()(Demo)
</script>

4
components/form/demo/time-related-controls.md → components/form/demo/time-related-controls.vue
View File

@ -8,7 +8,7 @@
the `value` of time-related components is `moment`. So, we need to pre-process those values. the `value` of time-related components is `moment`. So, we need to pre-process those values.
</us> </us>
```html
<script> <script>
import { Form } from 'vue-antd-ui' import { Form } from 'vue-antd-ui'
@ -125,7 +125,7 @@ const TimeRelatedForm = {
export default Form.create()(TimeRelatedForm) export default Form.create()(TimeRelatedForm)
</script> </script>
```

6
components/form/demo/validate-other.md → components/form/demo/validate-other.vue
View File

@ -8,7 +8,7 @@
Demostration for validataion configuration for form controls which are not show in the above demos. Demostration for validataion configuration for form controls which are not show in the above demos.
</us> </us>
```html
<script> <script>
import { Form } from 'vue-antd-ui' import { Form } from 'vue-antd-ui'
@ -38,7 +38,7 @@ const Demo = {
wrapperCol: { span: 14 }, wrapperCol: { span: 14 },
} }
return ( return (
<a-form id="components-form-demo-validate-other" onSubmit={this.handleSubmit}> <a-form id='components-form-demo-validate-other' onSubmit={this.handleSubmit}>
<a-form-item <a-form-item
{...{ props: formItemLayout }} {...{ props: formItemLayout }}
label='Plain Text' label='Plain Text'
@ -199,7 +199,7 @@ export default Form.create()(Demo)
line-height: 1.5; line-height: 1.5;
} }
</style> </style>
```

4
components/form/demo/validate-static.md → components/form/demo/validate-static.vue
View File

@ -14,7 +14,7 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
3. `help`: display validate message. 3. `help`: display validate message.
</us> </us>
```html
<template> <template>
<a-form> <a-form>
<a-form-item <a-form-item
@ -172,7 +172,7 @@ export default {
}, },
} }
</script> </script>
```

4
components/form/demo/without-form-create.md → components/form/demo/without-form-create.vue
View File

@ -8,7 +8,7 @@
`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. `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.
</us> </us>
```html
<template> <template>
<a-form> <a-form>
<a-form-item <a-form-item
@ -61,7 +61,7 @@ export default {
}, },
} }
</script> </script>
```

59
components/form/index.en-US.md
View File

@ -1,29 +1,31 @@
```jsx ````html
<Form.Item {...props}> <Form.Item {...props}>
{children} {children}
</Form.Item> </Form.Item>
``` ````
## API ## API
### Form ### Form
**more example [rc-form](http://react-component.github.io/form/)**。
| Property | Description | Type | Default Value | | Property | Description | Type | Default Value |
| -------- | ----------- | ---- | ------------- | | -------- | ----------- | ---- | ------------- |
| form | Decorated by `Form.create()` will be automatically set `this.props.form` property, so just pass to form, you don't need to set it by yourself after 1.7.0. | object | n/a | | form | Decorated by `Form.create()` will be automatically set `this.form` property, so just pass to form, you don't need to set it by yourself after 1.7.0. | object | n/a |
| hideRequiredMark | Hide required mark of all form items | Boolean | false | | hideRequiredMark | Hide required mark of all form items | Boolean | false |
| layout | Define form layout(Support after 2.8) | 'horizontal'\|'vertical'\|'inline' | 'horizontal' | | layout | Define form layout(Support after 2.8) | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
| onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) | |
### Events
| Events Name | Description | Arguments |
| --- | --- | --- |
| submit | Defines a function will be called if form data validation is successful. | Function(e:Event) |
### Form.create(options) ### Form.create(options)
How to use： How to use：
```jsx ```jsx
class CustomizedForm extends React.Component {} const CustomizedForm = {}
CustomizedForm = Form.create({})(CustomizedForm); CustomizedForm = Form.create({})(CustomizedForm);
``` ```
@ -32,12 +34,13 @@ The following `options` are available:
| Property | Description | Type | | Property | Description | Type |
| -------- | ----------- | ---- | | -------- | ----------- | ---- |
| props | declare props on form(和[like vue props]( https://vuejs.org/v2/api/#props)) | {} |
| mapPropsToFields | Convert props to field value(e.g. reading the values from Redux store). And you must mark returned fields with [`Form.createFormField`](#Form.createFormField) | (props) => Object{ fieldName: FormField { value } } | | mapPropsToFields | Convert props to field value(e.g. reading the values from Redux store). And you must mark returned fields with [`Form.createFormField`](#Form.createFormField) | (props) => Object{ fieldName: FormField { value } } |
| validateMessages | Default validate message. And its format is similar with [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js)'s returned value | Object { [nested.path]&#x3A; String } | | validateMessages | Default validate message. And its format is similar with [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js)'s returned value | Object { [nested.path]&#x3A; String } |
| onFieldsChange | Specify a function that will be called when the value a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, fields) | | onFieldsChange | Specify a function that will be called when the value a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, fields) |
| onValuesChange | A handler while value of any field is changed | (props, values) => void | | onValuesChange | A handler while value of any field is changed | (props, values) => void |
If the form has been decorated by `Form.create` then it has `this.props.form` property. `this.props.form` provides some APIs as follows: If the form has been decorated by `Form.create` then it has `this.form` property. `this.form` provides some APIs as follows:
> Note: Before using `getFieldsValue` `getFieldValue` `setFieldsValue` and so on, please make sure that corresponding field had been registered with `getFieldDecorator`. > Note: Before using `getFieldsValue` `getFieldValue` `setFieldsValue` and so on, please make sure that corresponding field had been registered with `getFieldDecorator`.
@ -52,13 +55,13 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr
| isFieldTouched | Check whether a field is touched by `getFieldDecorator`'s `options.trigger` event | (name: string) => boolean | | isFieldTouched | Check whether a field is touched by `getFieldDecorator`'s `options.trigger` event | (name: string) => boolean |
| isFieldValidating | Check if the specified field is being validated. | Function(name) | | isFieldValidating | Check if the specified field is being validated. | Function(name) |
| resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function(\[names: string\[]]) | | resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function(\[names: string\[]]) |
| setFields | Set the value and error of a field. [Code Sample](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | Function({ [fieldName]&#x3A; { value: any, errors: [Error] } }) | | setFields | Set the value and error of a field. | Function({ [fieldName]&#x3A; { value: any, errors: [Error] } }) |
| setFields | | Function(obj: object) | | setFields | | Function(obj: object) |
| setFieldsValue | Set the value of a field.(Note: please don't use it in `componentWillReceiveProps`, otherwise, it will cause an endless loop, [more](https://github.com/ant-design/ant-design/issues/2985)) | Function({ [fieldName]&#x3A; value } | | setFieldsValue | Set the value of a field. | Function({ [fieldName]&#x3A; value } |
| validateFields | Validate the specified fields and get theirs values and errors. If you don't specify the parameter of fieldNames, you will vaildate all fields. | Function(\[fieldNames: string\[]], [options: object], callback: Function(errors, values)) | | validateFields | Validate the specified fields and get theirs values and errors. If you don't specify the parameter of fieldNames, you will vaildate all fields. | Function(\[fieldNames: string\[]], [options: object], callback: Function(errors, values)) |
| validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` | | validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` |
### this.props.form.validateFields/validateFieldsAndScroll(\[fieldNames: string\[]], [options: object], callback: Function(errors, values)) ### this.form.validateFields/validateFieldsAndScroll(\[fieldNames: string\[]], [options: object], callback: Function(errors, values))
| Method | Description | Type | Default | | Method | Description | Type | Default |
| ------ | ----------- | ---- | ------- | | ------ | ----------- | ---- | ------- |
@ -71,18 +74,18 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr
To mark the returned fields data in `mapPropsToFields`, [demo](#components-form-demo-global-state). To mark the returned fields data in `mapPropsToFields`, [demo](#components-form-demo-global-state).
### this.props.form.getFieldDecorator(id, options) ### this.form.getFieldDecorator(id, options)
After wrapped by `getFieldDecorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls，the flow of form data will be handled by Form which will cause: After wrapped by `getFieldDecorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls，the flow of form data will be handled by Form which will cause:
1. You shouldn't use `onChange` to collect data, but you still can listen to `onChange`(and so on) events. 1. You shouldn't use `onChange` to collect data, but you still can listen to `onChange`(and so on) events.
2. You can not set value of form control via `value` `defaultValue` prop, and you should set default value with `initialValue` in `getFieldDecorator` instead. 2. You can not set value of form control via `value` `defaultValue` prop, and you should set default value with `initialValue` in `getFieldDecorator` instead.
3. You shouldn't call `setState` manually, please use `this.props.form.setFieldsValue` to change value programmatically. 3. You shouldn't call `v-model` manually, please use `this.form.setFieldsValue` to change value programmatically.
#### Special attention #### Special attention
1. `getFieldDecorator` can not be used to decorate stateless component. 1. `getFieldDecorator` can not be used to decorate stateless component.
2. If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless component: <https://github.com/facebook/react/pull/6534> 2. you can't use `getFieldDecorator` in stateless component: <https://vuejs.org/v2/api/#functional>
#### getFieldDecorator(id, options) parameters #### getFieldDecorator(id, options) parameters
@ -98,14 +101,13 @@ After wrapped by `getFieldDecorator`, `value`(or other property defined by `valu
| options.validateTrigger | When to validate the value of children node. | string\|string\[] | 'onChange' | | options.validateTrigger | When to validate the value of children node. | string\|string\[] | 'onChange' |
| options.valuePropName | Props of children node, for example, the prop of Switch is 'checked'. | string | 'value' | | options.valuePropName | Props of children node, for example, the prop of Switch is 'checked'. | string | 'value' |
More option at [rc-form option](https://github.com/react-component/form#option-object)。 More option can be referenced at [rc-form option](https://github.com/react-component/form#option-object)。
### Form.Item ### Form.Item
Note: Note:
- If Form.Item has multiple children that had been decorated by `getFieldDecorator`, `help` and `required` and `validateStatus` can't be generated automatically. - If Form.Item has multiple children that had been decorated by `getFieldDecorator`, `help` and `required` and `validateStatus` can't be generated automatically.
- Before `2.2.0`, form controls must be child of Form.Item, otherwise, you need to set `help`, `required` and `validateStatus` by yourself.
| Property | Description | Type | Default Value | | Property | Description | Type | Default Value |
| -------- | ----------- | ---- | ------------- | | -------- | ----------- | ---- | ------------- |
@ -114,10 +116,10 @@ Note:
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false | | hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false |
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode | | | help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode | |
| label | Label text | string\|ReactNode | | | label | Label text | string\|ReactNode | |
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](https://ant.design/components/grid/#Col) | | | labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/ant-design/components/grid/#Col) | |
| required | Whether provided or not, it will be generated by the validation rule. | boolean | false | | required | Whether provided or not, it will be generated by the validation rule. | boolean | false |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | | | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | |
| wrapperCol | The layout for input controls, same as `labelCol` | [object](https://ant.design/components/grid/#Col) | | | wrapperCol | The layout for input controls, same as `labelCol` | [object](/ant-design/components/grid/#Col) | |
### Validation Rules ### Validation Rules
@ -137,24 +139,3 @@ Note:
See more advanced usage at [async-validator](https://github.com/yiminghe/async-validator). See more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).
<style>
.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
max-width: 600px;
}
</style>
## Using in TypeScript
```jsx
import { Form } from 'antd';
import { FormComponentProps } from 'antd/lib/form';
interface UserFormProps extends FormComponentProps {
age: number;
name: string;
}
class UserForm extends React.Component<UserFormProps, any> {
}
```

60
components/form/index.zh-CN.md
View File

@ -1,29 +1,31 @@
```jsx ````html
<Form.Item {...props}> <Form.Item {...props}>
{children} {children}
</Form.Item> </Form.Item>
``` ````
## API ## API
### Form ### Form
**更多示例参考 [rc-form](http://react-component.github.io/form/)**。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| form | 经 `Form.create()` 包装过的组件会自带 `this.form` 属性，直接传给 Form 即可。无需手动设置 | object | 无 | | form | 经 `Form.create()` 包装过的组件会自带 `this.form` 属性，直接传给 Form 即可。无需手动设置 | object | 无 |
| hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false | | hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false |
| layout | 表单布局(2.8 之后支持) | 'horizontal'\|'vertical'\|'inline' | 'horizontal' | | layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| submit | 数据验证成功后回调事件 | Function(e:Event) |
### Form.create(options) ### Form.create(options)
使用方式如下： 使用方式如下：
```jsx ```jsx
class CustomizedForm extends React.Component {} const CustomizedForm = {}
CustomizedForm = Form.create({})(CustomizedForm); CustomizedForm = Form.create({})(CustomizedForm);
``` ```
@ -32,12 +34,13 @@ CustomizedForm = Form.create({})(CustomizedForm);
| 参数 | 说明 | 类型 | | 参数 | 说明 | 类型 |
| --- | --- | --- | | --- | --- | --- |
| props | 父组件需要映射到表单项上的属性声明(和[vue组件props一致]( https://vuejs.org/v2/api/#props)) | {} |
| mapPropsToFields | 把父组件的属性映射到表单项上（如：把 Redux store 中的值读出），需要对返回值中的表单域数据用 [`Form.createFormField`](#Form.createFormField) 标记 | (props) => Object{ fieldName: FormField { value } } | | mapPropsToFields | 把父组件的属性映射到表单项上（如：把 Redux store 中的值读出），需要对返回值中的表单域数据用 [`Form.createFormField`](#Form.createFormField) 标记 | (props) => Object{ fieldName: FormField { value } } |
| validateMessages | 默认校验信息，可用于把默认错误信息改为中文等，格式与 [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js) 返回值一致 | Object { [nested.path]&#x3A; String } | | validateMessages | 默认校验信息，可用于把默认错误信息改为中文等，格式与 [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js) 返回值一致 | Object { [nested.path]&#x3A; String } |
| onFieldsChange | 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store | Function(props, fields) | | onFieldsChange | 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store | Function(props, fields) |
| onValuesChange | 任一表单域的值发生改变时的回调 | (props, values) => void | | onValuesChange | 任一表单域的值发生改变时的回调 | (props, values) => void |
经过 `Form.create` 包装的组件将会自带 `this.props.form` 属性，`this.props.form` 提供的 API 如下： 经过 `Form.create` 包装的组件将会自带 `this.form` 属性，`this.form` 提供的 API 如下：
> 注意：使用 `getFieldsValue` `getFieldValue` `setFieldsValue` 等时，应确保对应的 field 已经用 `getFieldDecorator` 注册过了。 > 注意：使用 `getFieldsValue` `getFieldValue` `setFieldsValue` 等时，应确保对应的 field 已经用 `getFieldDecorator` 注册过了。
@ -52,12 +55,12 @@ CustomizedForm = Form.create({})(CustomizedForm);
| isFieldTouched | 判断一个输入控件是否经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (name: string) => boolean | | isFieldTouched | 判断一个输入控件是否经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (name: string) => boolean |
| isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) | | isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) |
| resetFields | 重置一组输入控件的值（为 `initialValue`）与状态，如不传入参数，则重置所有组件 | Function(\[names: string\[]]) | | resetFields | 重置一组输入控件的值（为 `initialValue`）与状态，如不传入参数，则重置所有组件 | Function(\[names: string\[]]) |
| setFields | 设置一组输入控件的值与 Error。 [代码](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | Function({ [fieldName]&#x3A; { value: any, errors: [Error] } }) | | setFields | 设置一组输入控件的值与 Error。 | Function({ [fieldName]&#x3A; { value: any, errors: [Error] } }) |
| setFieldsValue | 设置一组输入控件的值（注意：不要在 `componentWillReceiveProps` 内使用，否则会导致死循环，[更多](https://github.com/ant-design/ant-design/issues/2985)） | Function({ [fieldName]&#x3A; value } | | setFieldsValue | 设置一组输入控件的值 | Function({ [fieldName]&#x3A; value } |
| validateFields | 校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件 | Function(\[fieldNames: string\[]], [options: object], callback: Function(errors, values)) | | validateFields | 校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件 | Function(\[fieldNames: string\[]], [options: object], callback: Function(errors, values)) |
| validateFieldsAndScroll | 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 `validateFields` | | validateFieldsAndScroll | 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 `validateFields` |
### this.props.form.validateFields/validateFieldsAndScroll(\[fieldNames: string\[]], [options: object], callback: Function(errors, values)) ### this.form.validateFields/validateFieldsAndScroll(\[fieldNames: string\[]], [options: object], callback: Function(errors, values))
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -70,24 +73,24 @@ CustomizedForm = Form.create({})(CustomizedForm);
用于标记 `mapPropsToFields` 返回的表单域数据，[例子](#components-form-demo-global-state)。 用于标记 `mapPropsToFields` 返回的表单域数据，[例子](#components-form-demo-global-state)。
### this.props.form.getFieldDecorator(id, options) ### this.form.getFieldDecorator(id, options)
经过 `getFieldDecorator` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果： 经过 `getFieldDecorator` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
1. 你**不再需要也不应该**用 `onChange` 来做同步，但还是可以继续监听 `onChange` 等事件。 1. 你**不再需要也不应该**用 `onChange` 来做同步，但还是可以继续监听 `onChange` 等事件。
2. 你不能用控件的 `value` `defaultValue` 等属性来设置表单域的值，默认值可以用 `getFieldDecorator` 里的 `initialValue`。 2. 你不能用控件的 `value` `defaultValue` 等属性来设置表单域的值，默认值可以用 `getFieldDecorator` 里的 `initialValue`。
3. 你不应该用 `setState`，可以使用 `this.props.form.setFieldsValue` 来动态改变表单值。 3. 你不应该用 `v-modle`，可以使用 `this.form.setFieldsValue` 来动态改变表单值。
#### 特别注意 #### 特别注意
1. `getFieldDecorator` 不能用于装饰纯函数组件。 1. `getFieldDecorator` 不能用于装饰纯函数组件。
2. 如果使用的是 `react@<15.3.0`，则 `getFieldDecorator` 调用不能位于纯函数组件中: <https://github.com/facebook/react/pull/6534> 2. `getFieldDecorator` 调用不能位于纯函数组件中 <https://cn.vuejs.org/v2/api/#functional>。
#### getFieldDecorator(id, options) 参数 #### getFieldDecorator(id, options) 参数
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| id | 必填输入控件唯一标志。支持嵌套式的[写法](https://github.com/react-component/form/pull/48)。 | string | | | id | 必填输入控件唯一标志。支持嵌套式的写法。 | string | |
| options.getValueFromEvent | 可以把 onChange 的参数（如 event）转化为控件的值 | function(..args) | [reference](https://github.com/react-component/form#option-object) | | options.getValueFromEvent | 可以把 onChange 的参数（如 event）转化为控件的值 | function(..args) | [reference](https://github.com/react-component/form#option-object) |
| options.initialValue | 子节点的初始值，类型、可选值均由子节点决定(注意：由于内部校验时使用 `===` 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量)) | | | | options.initialValue | 子节点的初始值，类型、可选值均由子节点决定(注意：由于内部校验时使用 `===` 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量)) | | |
| options.normalize | 转换默认的 value 给控件，[一个选择全部的例子](https://codepen.io/afc163/pen/JJVXzG?editors=001) | function(value, prevValue, allValues): any | - | | options.normalize | 转换默认的 value 给控件，[一个选择全部的例子](https://codepen.io/afc163/pen/JJVXzG?editors=001) | function(value, prevValue, allValues): any | - |
@ -97,14 +100,13 @@ CustomizedForm = Form.create({})(CustomizedForm);
| options.validateTrigger | 校验子节点值的时机 | string\|string\[] | 'onChange' | | options.validateTrigger | 校验子节点值的时机 | string\|string\[] | 'onChange' |
| options.valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' | | options.valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' |
更多参数请查看 [rc-form option](https://github.com/react-component/form#option-object)。 更多参数可参考 [rc-form option](https://github.com/react-component/form#option-object)。
### Form.Item ### Form.Item
注意： 注意：
- 一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child，当有多个被装饰过的 child 时，`help` `required` `validateStatus` 无法自动生成。 - 一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child，当有多个被装饰过的 child 时，`help` `required` `validateStatus` 无法自动生成。
- `2.2.0` 之前，只有当表单域为 Form.Item 的子元素时，才会自动生成 `help` `required` `validateStatus`，嵌套情况需要自行设置。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -113,10 +115,10 @@ CustomizedForm = Form.create({})(CustomizedForm);
| hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false | | hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false |
| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|ReactNode | | | help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|ReactNode | |
| label | label 标签的文本 | string\|ReactNode | | | label | label 标签的文本 | string\|ReactNode | |
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](https://ant.design/components/grid/#Col) | | | labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/ant-design/components/grid-cn/#Col) | |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false | | required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false |
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | | | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](https://ant.design/components/grid/#Col) | | | wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/ant-design/components/grid-cn/#Col) | |
### 校验规则 ### 校验规则
@ -136,24 +138,4 @@ CustomizedForm = Form.create({})(CustomizedForm);
更多高级用法可研究 [async-validator](https://github.com/yiminghe/async-validator)。 更多高级用法可研究 [async-validator](https://github.com/yiminghe/async-validator)。
<style>
.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
max-width: 600px;
}
</style>
## 在 TypeScript 中使用
```jsx
import { Form } from 'antd';
import { FormComponentProps } from 'antd/lib/form';
interface UserFormProps extends FormComponentProps {
age: number;
name: string;
}
class UserForm extends React.Component<UserFormProps, any> {
}
```

8
site/components/demoBox.vue
View File

@ -51,10 +51,10 @@ export default {
}, },
data () { data () {
const { name = '' } = this.$route.params const { name = '' } = this.$route.params
const { html, script, style, us, cn } = this.jsfiddle const { html, script, style, us, cn, sourceCode } = this.jsfiddle
let sourceCode = `<template>${html}</template>\n` // let sourceCode = `<template>${html}</template>\n`
sourceCode = script ? sourceCode + '\<script>' + script + '<\/script>' : sourceCode // sourceCode = script ? sourceCode + '\<script>' + script + '<\/script>' : sourceCode
sourceCode = style ? sourceCode + '\<style>' + style + '<\/style>' : sourceCode // sourceCode = style ? sourceCode + '\<style>' + style + '<\/style>' : sourceCode
const usTitle = (us.split('#### ')[1] || '').split('\n')[0] || '' const usTitle = (us.split('#### ')[1] || '').split('\n')[0] || ''
const cnTitle = (cn.split('#### ')[1] || '').split('\n')[0] || '' const cnTitle = (cn.split('#### ')[1] || '').split('\n')[0] || ''
if (process.env.NODE_ENV !== 'production' && usTitle === '') { if (process.env.NODE_ENV !== 'production' && usTitle === '') {

81
site/components/demoContainer.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<div>
<demo-box :jsfiddle="jsfiddle">
<template slot="component"><slot /></template>
<template slot="description">
<div v-html="cnHtml"></div>
</template>
<template slot="us-description">
<div v-html="usHtml"></div>
</template>
<template slot="code">
<div v-html="codeHtml"></div>
</template>
</demo-box>
</div>
</template>
<script>
import marked from 'marked'
const hljs = require('highlight.js')
const replaceDelimiters = function (str) {
return str.replace(/({{|}})/g, '<span>$1</span>')
}
const renderHighlight = function (str, lang) {
if (!(lang && hljs.getLanguage(lang))) {
return ''
}
try {
return replaceDelimiters(hljs.highlight(lang, str, true).value)
} catch (err) {}
}
const renderer = new marked.Renderer()
renderer.heading = function (text, level) {
return '<h' +
level +
' id="' +
text.replace(/[^\w]+/g, '-') +
'">' +
text +
'</h' +
level +
'>\n'
}
marked.setOptions({
renderer,
gfm: true,
tables: true,
breaks: true,
pedantic: true,
sanitize: true,
smartLists: true,
smartypants: true,
html: true,
highlight: renderHighlight,
})
const cnReg = /<cn>([\S\s\t]*?)<\/cn>/
const usReg = /<us>([\S\s\t]*?)<\/us>/
export default {
name: 'demoContainer',
props: ['code'],
data () {
const cn = this.code.match(cnReg) || []
const us = this.code.match(usReg) || []
const cnHtml = marked(cn[1].trim())
const usHtml = marked(us[1].trim())
const sourceCode = this.code.replace(cn[0], '').replace(us[0], '').trim()
const codeHtml = marked('````jsx\n' + sourceCode + '````')
return {
codeHtml,
cnHtml,
usHtml,
jsfiddle: {
sourceCode,
cn: cn[1].trim(),
us: us[1].trim(),
},
}
},
}
</script>

24
site/components/md.vue
View File

@ -4,18 +4,18 @@
<script> <script>
import marked from 'marked' import marked from 'marked'
import { isZhCN } from '../util' import { isZhCN } from '../util'
var renderer = new marked.Renderer(); const renderer = new marked.Renderer()
renderer.heading = function(text, level) { renderer.heading = function (text, level) {
return '<h' return '<h' +
+ level level +
+ ' id="' ' id="' +
+ text.replace(/[^\w]+/g, '-') text.replace(/[^\w]+/g, '-') +
+ '">' '">' +
+ text text +
+ '</h' '</h' +
+ level level +
+ '>\n'; '>\n'
}; }
marked.setOptions({ marked.setOptions({
renderer, renderer,
gfm: true, gfm: true,

1
site/demo.js
View File

@ -44,3 +44,4 @@ export { default as transfer } from 'antd/transfer/demo/index.vue'
export { default as upload } from 'antd/upload/demo/index.vue' export { default as upload } from 'antd/upload/demo/index.vue'
export { default as tree } from 'antd/tree/demo/index.vue' export { default as tree } from 'antd/tree/demo/index.vue'
export { default as layout } from 'antd/layout/demo/index.vue' export { default as layout } from 'antd/layout/demo/index.vue'
export { default as form } from 'antd/form/demo/index.vue'

2
site/index.js
View File

@ -10,12 +10,14 @@ import Md from './components/md'
import Api from './components/api' import Api from './components/api'
import './components' import './components'
import demoBox from './components/demoBox' import demoBox from './components/demoBox'
import demoContainer from './components/demoContainer'
Vue.use(VueClipboard) Vue.use(VueClipboard)
Vue.use(VueRouter) Vue.use(VueRouter)
Vue.component(Md.name, Md) Vue.component(Md.name, Md)
Vue.component(Api.name, Api) Vue.component(Api.name, Api)
Vue.component('demo-box', demoBox) Vue.component('demo-box', demoBox)
Vue.component('demo-container', demoContainer)
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: 'history',

128
site/routes.js
View File

@ -1,5 +1,5 @@
// import Layout from './components/layout.vue' import Layout from './components/layout.vue'
// import Iframe from './components/iframe.vue' import Iframe from './components/iframe.vue'
const AsyncTestComp = () => { const AsyncTestComp = () => {
const d = window.location.hash.replace('#', '') const d = window.location.hash.replace('#', '')
@ -9,68 +9,68 @@ const AsyncTestComp = () => {
} }
export default [ export default [
// { path: '/ant-design/components/:name/', component: Layout, props: true }, { path: '/ant-design/components/:name/', component: Layout, props: true },
// { path: '/ant-design/iframe/:name/', component: Iframe, props: true }, { path: '/ant-design/iframe/:name/', component: Iframe, props: true },
// { {
// path: '/ant-design', path: '/ant-design',
// component: Layout, component: Layout,
// props: (route) => { props: (route) => {
// const name = route.path.split('/docs/vue/')[1].split('/')[0] const name = route.path.split('/docs/vue/')[1].split('/')[0]
// return { name } return { name }
// }, },
// children: [ children: [
// { {
// path: 'docs/vue/customize-theme', path: 'docs/vue/customize-theme',
// component: () => import('../docs/vue/customize-theme.en-US.md'), component: () => import('../docs/vue/customize-theme.en-US.md'),
// }, },
// { {
// path: 'docs/vue/customize-theme-cn', path: 'docs/vue/customize-theme-cn',
// component: () => import('../docs/vue/customize-theme.zh-CN.md'), component: () => import('../docs/vue/customize-theme.zh-CN.md'),
// }, },
// { {
// path: 'docs/vue/getting-started', path: 'docs/vue/getting-started',
// component: () => import('../docs/vue/getting-started.en-US.md'), component: () => import('../docs/vue/getting-started.en-US.md'),
// }, },
// { {
// path: 'docs/vue/getting-started-cn', path: 'docs/vue/getting-started-cn',
// component: () => import('../docs/vue/getting-started.zh-CN.md'), component: () => import('../docs/vue/getting-started.zh-CN.md'),
// }, },
// { {
// path: 'docs/vue/i18n', path: 'docs/vue/i18n',
// component: () => import('../docs/vue/i18n.en-US.md'), component: () => import('../docs/vue/i18n.en-US.md'),
// }, },
// { {
// path: 'docs/vue/i18n-cn', path: 'docs/vue/i18n-cn',
// component: () => import('../docs/vue/i18n.zh-CN.md'), component: () => import('../docs/vue/i18n.zh-CN.md'),
// }, },
// { {
// path: 'docs/vue/introduce', path: 'docs/vue/introduce',
// component: () => import('../docs/vue/introduce.en-US.md'), component: () => import('../docs/vue/introduce.en-US.md'),
// }, },
// { {
// path: 'docs/vue/introduce-cn', path: 'docs/vue/introduce-cn',
// component: () => import('../docs/vue/introduce.zh-CN.md'), component: () => import('../docs/vue/introduce.zh-CN.md'),
// }, },
// { {
// path: 'docs/vue/use-with-vue-cli', path: 'docs/vue/use-with-vue-cli',
// component: () => import('../docs/vue/use-with-vue-cli.en-US.md'), component: () => import('../docs/vue/use-with-vue-cli.en-US.md'),
// }, },
// { {
// path: 'docs/vue/use-with-vue-cli-cn', path: 'docs/vue/use-with-vue-cli-cn',
// component: () => import('../docs/vue/use-with-vue-cli.zh-CN.md'), component: () => import('../docs/vue/use-with-vue-cli.zh-CN.md'),
// }, },
// { {
// path: 'docs/vue/changelog', path: 'docs/vue/changelog',
// component: () => import('../CHANGELOG.en-US.md'), component: () => import('../CHANGELOG.en-US.md'),
// }, },
// { {
// path: 'docs/vue/changelog-cn', path: 'docs/vue/changelog-cn',
// component: () => import('../CHANGELOG.zh-CN.md'), component: () => import('../CHANGELOG.zh-CN.md'),
// }, },
// { path: '', redirect: '/ant-design/vue/docs/introduce/' }, { path: '', redirect: '/ant-design/vue/docs/introduce/' },
// ], ],
// }, },
{ path: '/:prefix?/test/:demo?/', component: AsyncTestComp }, { path: '/:prefix?/test/:demo?/', component: AsyncTestComp },
// { path: '/*', redirect: '/ant-design/docs/vue/introduce/' }, { path: '/*', redirect: '/ant-design/docs/vue/introduce/' },
] ]

3
webpack.base.config.js
View File

@ -65,6 +65,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
let style = '' let style = ''
let scopedStyle = '' let scopedStyle = ''
let code = '' let code = ''
let sourceCode = ''
tokens.forEach(token => { tokens.forEach(token => {
if (token.type === 'html_block') { if (token.type === 'html_block') {
if (token.content.match(cnReg)) { if (token.content.match(cnReg)) {
@ -77,6 +78,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
} }
} }
if (token.type === 'fence' && token.info === 'html' && token.markup === '```') { if (token.type === 'fence' && token.info === 'html' && token.markup === '```') {
sourceCode = token.content
code = '````html\n' + token.content + '````' code = '````html\n' + token.content + '````'
template = fetch(token.content, 'template') template = fetch(token.content, 'template')
script = fetch(token.content, 'script') script = fetch(token.content, 'script')
@ -93,6 +95,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
style, style,
us, us,
cn, cn,
sourceCode,
} }
jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle)) jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle))
const codeHtml = code ? md.render(code) : '' const codeHtml = code ? md.render(code) : ''