feat: add form demo
tjz
parent
28468968c9
commit
790fe9c4b9
|
|
@ -1,7 +1,8 @@
|
|||
|
||||
import hasProp from '../_util/props-util'
|
||||
import classNames from 'classnames'
|
||||
import hasProp, { getClass, getStyle } from '../_util/props-util'
|
||||
import PropTypes from '../_util/vue-types'
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
name: 'ACheckbox',
|
||||
props: {
|
||||
prefixCls: {
|
||||
|
|
@ -104,9 +105,13 @@ export default {
|
|||
onChange = () => checkboxGroupContext.toggleOption({ value: props.value })
|
||||
disabled = props.disabled || checkboxGroupContext.disabled
|
||||
}
|
||||
const classString = classNames(getClass(this), {
|
||||
[`${prefixCls}-wrapper`]: true,
|
||||
})
|
||||
return (
|
||||
<label
|
||||
class={`${prefixCls}-wrapper`}
|
||||
class={classString}
|
||||
style={getStyle(this)}
|
||||
onMouseenter={this.onMouseEnter}
|
||||
onMouseleave={this.onMouseLeave}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -117,8 +117,8 @@ export default {
|
|||
return this.getChildAttr(FIELD_DATA_PROP)
|
||||
},
|
||||
|
||||
onHelpAnimEnd (_key, helpShow) {
|
||||
this.setState({ helpShow })
|
||||
onHelpAnimEnd () {
|
||||
this.setState({ helpShow: false })
|
||||
},
|
||||
|
||||
renderHelp () {
|
||||
|
|
@ -132,6 +132,9 @@ export default {
|
|||
const transitionProps = getTransitionProps('show-help', {
|
||||
afterLeave: this.onHelpAnimEnd,
|
||||
})
|
||||
if (children) {
|
||||
this.setState({ helpShow: true })
|
||||
}
|
||||
return (
|
||||
<transition
|
||||
{...transitionProps}
|
||||
|
|
@ -286,7 +289,7 @@ export default {
|
|||
return label ? (
|
||||
<Col {...colProps} >
|
||||
<label
|
||||
htmlFor={id || this.getId()}
|
||||
for={id || this.getId()}
|
||||
class={labelClassName}
|
||||
title={typeof label === 'string' ? label : ''}
|
||||
onClick={this.onLabelClick}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
<cn>
|
||||
#### 高级搜索
|
||||
三列栅格式的表单排列方式，常用于数据表格的高级搜索。
|
||||
有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Advanced search
|
||||
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.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { Form } from 'vue-antd-ui'
|
||||
|
||||
const AdvancedSearchForm = {
|
||||
data () {
|
||||
return {
|
||||
expand: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSearch (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((error, values) => {
|
||||
console.log('error', error)
|
||||
console.log('Received values of form: ', values)
|
||||
})
|
||||
},
|
||||
|
||||
handleReset () {
|
||||
this.form.resetFields()
|
||||
},
|
||||
|
||||
toggle () {
|
||||
this.expand = !this.expand
|
||||
},
|
||||
|
||||
// To generate mock Form.Item
|
||||
getFields () {
|
||||
const count = this.expand ? 10 : 6
|
||||
const { getFieldDecorator } = this.form
|
||||
const children = []
|
||||
for (let i = 0; i < 10; i++) {
|
||||
children.push(
|
||||
<a-col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}>
|
||||
<a-form-item label={`Field ${i}`}>
|
||||
{getFieldDecorator(`field-${i}`, {
|
||||
rules: [{
|
||||
required: true,
|
||||
message: 'Input something!',
|
||||
}],
|
||||
})(
|
||||
<a-input placeholder='placeholder' />
|
||||
)}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
)
|
||||
}
|
||||
return children
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
return (
|
||||
<a-form
|
||||
class='ant-advanced-search-form'
|
||||
onSubmit={this.handleSearch}
|
||||
>
|
||||
<a-row gutter={24}>{this.getFields()}</a-row>
|
||||
<a-row>
|
||||
<a-col span={24} style={{ textAlign: 'right' }}>
|
||||
<a-button type='primary' htmlType='submit'>Search</a-button>
|
||||
<a-button style={{ marginLeft: '8px' }} onClick={this.handleReset}>
|
||||
Clear
|
||||
</a-button>
|
||||
<a style={{ marginLeft: '8px', fontSize: '12px' }} onClick={this.toggle}>
|
||||
Collapse <a-icon type={this.expand ? 'up' : 'down'} />
|
||||
</a>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm)
|
||||
|
||||
export default {
|
||||
render () {
|
||||
return (
|
||||
<div id='components-form-demo-advanced-search'>
|
||||
<WrappedAdvancedSearchForm />
|
||||
<div class='search-result-list'>Search Result List</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.ant-advanced-search-form {
|
||||
padding: 24px;
|
||||
background: #fbfbfb;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.ant-advanced-search-form .ant-form-item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ant-advanced-search-form .ant-form-item-control-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#components-form-demo-advanced-search .ant-form {
|
||||
max-width: none;
|
||||
}
|
||||
#components-form-demo-advanced-search .search-result-list {
|
||||
margin-top: 16px;
|
||||
border: 1px dashed #e9e9e9;
|
||||
border-radius: 6px;
|
||||
background-color: #fafafa;
|
||||
min-height: 200px;
|
||||
text-align: center;
|
||||
padding-top: 80px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<cn>
|
||||
#### 登录框
|
||||
普通的登录框，可以容纳更多的元素。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Login Form
|
||||
Normal login form which can contain more elements.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { Form } from 'vue-antd-ui'
|
||||
|
||||
const NormalLoginForm = {
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
console.log('Received values of form: ', values)
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const { getFieldDecorator } = this.form
|
||||
return (
|
||||
<a-form id='components-form-demo-normal-login' onSubmit={this.handleSubmit} class='login-form'>
|
||||
<a-form-item>
|
||||
{getFieldDecorator('userName', {
|
||||
rules: [{ required: true, message: 'Please input your username!' }],
|
||||
})(
|
||||
<a-input prefix={<a-icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder='Username' />
|
||||
)}
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
{getFieldDecorator('password', {
|
||||
rules: [{ required: true, message: 'Please input your Password!' }],
|
||||
})(
|
||||
<a-input prefix={<a-icon type='lock' style={{ color: 'rgba(0,0,0,.25)' }} />} type='password' placeholder='Password' />
|
||||
)}
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
{getFieldDecorator('remember', {
|
||||
valuePropName: 'checked',
|
||||
initialValue: true,
|
||||
})(
|
||||
<a-checkbox>Remember me</a-checkbox>
|
||||
)}
|
||||
<a class='login-form-forgot' href=''>Forgot password</a>
|
||||
<a-button type='primary' htmlType='submit' class='login-form-button'>
|
||||
Log in
|
||||
</a-button>
|
||||
Or <a href=''>register now!</a>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export default Form.create()(NormalLoginForm)
|
||||
</script>
|
||||
<style>
|
||||
#components-form-demo-normal-login .login-form {
|
||||
max-width: 300px;
|
||||
}
|
||||
#components-form-demo-normal-login .login-form-forgot {
|
||||
float: right;
|
||||
}
|
||||
#components-form-demo-normal-login .login-form-button {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<script>
|
||||
import { Form, Icon, Input, Button, Checkbox } from 'antd'
|
||||
const FormItem = Form.Item
|
||||
import { Form } from 'vue-antd-ui'
|
||||
|
||||
const NormalLoginForm = {
|
||||
methods: {
|
||||
|
|
@ -17,35 +16,35 @@ const NormalLoginForm = {
|
|||
render () {
|
||||
const { getFieldDecorator } = this.form
|
||||
return (
|
||||
<Form id='components-form-demo-normal-login' onSubmit={this.handleSubmit} class='login-form'>
|
||||
<FormItem>
|
||||
<a-form id='components-form-demo-normal-login' onSubmit={this.handleSubmit} class='login-form'>
|
||||
<a-form-item>
|
||||
{getFieldDecorator('userName', {
|
||||
rules: [{ required: true, message: 'Please input your username!' }],
|
||||
})(
|
||||
<Input prefix={<Icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder='Username' />
|
||||
<a-input prefix={<a-icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder='Username' />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
{getFieldDecorator('password', {
|
||||
rules: [{ required: true, message: 'Please input your Password!' }],
|
||||
})(
|
||||
<Input prefix={<Icon type='lock' style={{ color: 'rgba(0,0,0,.25)' }} />} type='password' placeholder='Password' />
|
||||
<a-input prefix={<a-icon type='lock' style={{ color: 'rgba(0,0,0,.25)' }} />} type='password' placeholder='Password' />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
{getFieldDecorator('remember', {
|
||||
valuePropName: 'checked',
|
||||
initialValue: true,
|
||||
})(
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
<a-checkbox>Remember me</a-checkbox>
|
||||
)}
|
||||
<a class='login-form-forgot' href=''>Forgot password</a>
|
||||
<Button type='primary' htmlType='submit' class='login-form-button'>
|
||||
<a-button type='primary' htmlType='submit' class='login-form-button'>
|
||||
Log in
|
||||
</Button>
|
||||
</a-button>
|
||||
Or <a href=''>register now!</a>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
|
||||
import classNames from 'classnames'
|
||||
import TextArea from './TextArea'
|
||||
import omit from 'omit.js'
|
||||
import inputProps from './inputProps'
|
||||
import { hasProp, getComponentFromProp } from '../_util/props-util'
|
||||
import { hasProp, getComponentFromProp, getStyle, getClass } from '../_util/props-util'
|
||||
|
||||
function fixControlledValue (value) {
|
||||
if (typeof value === 'undefined' || value === null) {
|
||||
|
|
@ -12,6 +12,7 @@ function fixControlledValue (value) {
|
|||
}
|
||||
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
name: 'AInput',
|
||||
props: {
|
||||
...inputProps,
|
||||
|
|
@ -96,10 +97,15 @@ export default {
|
|||
[wrapperClassName]: (addonBefore || addonAfter),
|
||||
}
|
||||
|
||||
const groupClassName = classNames(`${props.prefixCls}-group-wrapper`, {
|
||||
[`${props.prefixCls}-group-wrapper-sm`]: props.size === 'small',
|
||||
[`${props.prefixCls}-group-wrapper-lg`]: props.size === 'large',
|
||||
})
|
||||
if (addonBefore || addonAfter) {
|
||||
return (
|
||||
<span
|
||||
class={`${props.prefixCls}-group-wrapper`}
|
||||
class={groupClassName}
|
||||
style={getStyle(this)}
|
||||
>
|
||||
<span class={className}>
|
||||
{addonBefore}
|
||||
|
|
@ -118,7 +124,7 @@ export default {
|
|||
)
|
||||
},
|
||||
renderLabeledIcon (children) {
|
||||
const { prefixCls } = this.$props
|
||||
const { prefixCls, size } = this.$props
|
||||
let prefix = getComponentFromProp(this, 'prefix')
|
||||
let suffix = getComponentFromProp(this, 'suffix')
|
||||
if (!prefix && !suffix) {
|
||||
|
|
@ -136,10 +142,14 @@ export default {
|
|||
{suffix}
|
||||
</span>
|
||||
) : null
|
||||
|
||||
const affixWrapperCls = classNames(getClass(this), `${prefixCls}-affix-wrapper`, {
|
||||
[`${prefixCls}-affix-wrapper-sm`]: size === 'small',
|
||||
[`${prefixCls}-affix-wrapper-lg`]: size === 'large',
|
||||
})
|
||||
return (
|
||||
<span
|
||||
class={`${prefixCls}-affix-wrapper`}
|
||||
class={affixWrapperCls}
|
||||
style={getStyle(this)}
|
||||
>
|
||||
{prefix}
|
||||
{children}
|
||||
|
|
@ -167,7 +177,7 @@ export default {
|
|||
keydown: handleKeyDown,
|
||||
input: handleChange,
|
||||
},
|
||||
class: getInputClassName(),
|
||||
class: classNames(getInputClassName(), getClass(this)),
|
||||
ref: 'input',
|
||||
}
|
||||
return this.renderLabeledIcon(
|
||||
|
|
|
|||
Loading…
Reference in New Issue