标签：primary ext component 自己的 als col 取消 ica code
用两个button（添加，编辑）按钮展示同一个模态框，并不是什么大问题，问题在于解决这两个模态框得有自己的确定和取消方法
方式1：父页面完全接管子页面，因为之前用过ant-design-zorro，比较喜欢这种方法，子页面的方法都写在父页面中
父页面代码：
<template>
<div>
<a-button type="primary" @click="showModal">添加</a-button>
<a-button type="primary" @click="showEditModal">编辑</a-button>
<test-add
ref="collectionForm"
:visible="visible"
@cancel="dialogStatus===‘add‘?handleCancel():handleEditCancel()"
@ok="dialogStatus===‘add‘?handleOk():handleEditOk()"
/>
</div>
</template>
<script>
import TestAdd from ‘./modules/TestAdd‘
export default {
components: { TestAdd },
data() {
return {
dialogStatus:‘‘,
visible: false,
};
},
watch:{
},
methods: {
// 处理添加方法
showModal() {
this.visible = true;
this.dialogStatus = ‘add‘;
},
handleCancel() {
this.visible = false;
this.dialogStatus=‘‘
console.log(‘add cancel‘)
},
handleOk(){
console.log(‘add ok‘)
},
//处理编辑的方法
showEditModal(){
this.type = ‘edit‘;
this.visible = true;
},
handleEditCancel(){
this.visible = false;
this.dialogStatus = ‘‘
console.log(‘edit cancel‘)
},
handleEditOk(){
this.visible = true;
console.log(‘edit ok‘)
}
},
};
</script>
子页面代码：
<template> <a-modal :visible="visible" title=‘Create a new collection‘ okText=‘完成‘ @cancel="() => { $emit(‘cancel‘) }" @ok="() => { $emit(‘ok‘) }" > <a-form layout=‘vertical‘ :form="form"> <a-form-item label=‘Title‘> <a-input v-decorator="[ ‘title‘ ]" /> </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> </template> <script> export default { name: ‘TestAdd‘, props: [‘visible‘], data () { return { form: this.$form.createForm(this) } } } </script> <style scoped> </style>
方式2：父页面只管打开和关闭，逻辑方法交给子页面自己实现：
未完待续吧，我也不知道这两种方法哪个好点
ant-design-vue中实现modal模态框的复用（添加，编辑展示同一个模态框）
标签：primary ext component 自己的 als col 取消 ica code
原文地址：https://www.cnblogs.com/cirry/p/12491989.html
