105 lines
2.5 KiB
Vue
105 lines
2.5 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>
|
||
|
||
<template>
|
||
<div>
|
||
<a-button type='primary' @click="showModal">New Collection</a-button>
|
||
<collection-create-form
|
||
ref="collectionForm"
|
||
:visible="visible"
|
||
@cancel="handleCancel"
|
||
@create="handleCreate"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
const CollectionCreateForm = {
|
||
props: ['visible'],
|
||
beforeCreate () {
|
||
this.form = this.$form.createForm(this)
|
||
},
|
||
template: `
|
||
<a-modal
|
||
:visible="visible"
|
||
title='Create a new collection'
|
||
okText='Create'
|
||
@cancel="() => { $emit('cancel') }"
|
||
@ok="() => { $emit('create') }"
|
||
>
|
||
<a-form layout='vertical' :form="form">
|
||
<a-form-item label='Title'>
|
||
<a-input
|
||
v-decorator="[
|
||
'title',
|
||
{
|
||
rules: [{ required: true, message: 'Please input the title of collection!' }],
|
||
}
|
||
]"
|
||
/>
|
||
</a-form-item>
|
||
<a-form-item label='Description'>
|
||
<a-input
|
||
type='textarea'
|
||
v-decorator="['description']"
|
||
/>
|
||
</a-form-item>
|
||
<a-form-item class='collection-create-form_last-form-item'>
|
||
<a-radio-group
|
||
v-decorator="[
|
||
'modifier',
|
||
{
|
||
initialValue: 'private',
|
||
}
|
||
]"
|
||
>
|
||
<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.$refs.collectionForm.form
|
||
form.validateFields((err, values) => {
|
||
if (err) {
|
||
return
|
||
}
|
||
console.log('Received values of form: ', values)
|
||
form.resetFields()
|
||
this.visible = false
|
||
})
|
||
},
|
||
},
|
||
components: { CollectionCreateForm },
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|