106 lines
2.7 KiB
Vue
106 lines
2.7 KiB
Vue
<cn>
|
||
#### 弹出层中的新建表单
|
||
当用户访问一个展示了某个列表的页面，想新建一项但又不想跳转页面时，可以用 Modal 弹出一个表单，用户填写必要信息后创建新的项。
|
||
</cn>
|
||
|
||
<us>
|
||
#### Form in Modal to Create
|
||
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>
|
||
|
||
|
||
<script>
|
||
import { Form } from 'ant-design-vue'
|
||
|
||
const CollectionCreateForm = Form.create()(
|
||
{
|
||
props: ['visible'],
|
||
render () {
|
||
const { visible, form } = this
|
||
const { getFieldDecorator } = form
|
||
return (
|
||
<a-modal
|
||
visible={visible}
|
||
title='Create a new collection'
|
||
okText='Create'
|
||
onCancel={() => { this.$emit('cancel') }}
|
||
onOk={() => { this.$emit('create') }}
|
||
>
|
||
<a-form layout='vertical'>
|
||
<a-form-item label='Title'>
|
||
{getFieldDecorator('title', {
|
||
rules: [{ required: true, message: 'Please input the title of collection!' }],
|
||
})(
|
||
<a-input />
|
||
)}
|
||
</a-form-item>
|
||
<a-form-item label='Description'>
|
||
{getFieldDecorator('description')(<a-input type='textarea' />)}
|
||
</a-form-item>
|
||
<a-form-item className='collection-create-form_last-form-item'>
|
||
{getFieldDecorator('modifier', {
|
||
initialValue: 'public',
|
||
})(
|
||
<a-radio-group>
|
||
<a-radio value='public'>Public</a-radio>
|
||
<a-radio value='private'>Private</a-radio>
|
||
</a-radio-group>
|
||
)}
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-modal>
|
||
)
|
||
},
|
||
}
|
||
)
|
||
|
||
export default {
|
||
data () {
|
||
return {
|
||
visible: false,
|
||
}
|
||
},
|
||
methods: {
|
||
showModal () {
|
||
this.visible = true
|
||
},
|
||
handleCancel () {
|
||
this.visible = false
|
||
},
|
||
handleCreate () {
|
||
const form = this.formRef.form
|
||
form.validateFields((err, values) => {
|
||
if (err) {
|
||
return
|
||
}
|
||
|
||
console.log('Received values of form: ', values)
|
||
form.resetFields()
|
||
this.visible = false
|
||
})
|
||
},
|
||
saveFormRef (formRef) {
|
||
this.formRef = formRef
|
||
},
|
||
},
|
||
|
||
render () {
|
||
return (
|
||
<div>
|
||
<a-button type='primary' onClick={this.showModal}>New Collection</a-button>
|
||
<CollectionCreateForm
|
||
wrappedComponentRef={this.saveFormRef}
|
||
visible={this.visible}
|
||
onCancel={this.handleCancel}
|
||
onCreate={this.handleCreate}
|
||
/>
|
||
</div>
|
||
)
|
||
},
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
|