ant-design-vue中实现modal模态框的复用（添加，编辑展示同一个模态框）

Z时代
2024-01-10
分类：综合

vue

用两个button（添加，编辑）按钮展示同一个模态框，并不是什么大问题，问题在于解决这两个模态框得有自己的确定和取消方法

父页面完全接管子页面（利于子页面复用）

父页面代码：

<template>
  <div>
　　<-- 定义两个按钮，一个添加按钮，  一个编辑按钮  -->
    <a-button type="primary" @click="showModal">添加</a-button>
    <a-button type="primary" @click="showEditModal">编辑</a-button>
　　<-- 引入模态框，将modal框的确定和取消方法由此元素触发调用 -->
    <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>
　<-- 用emit方法触发父级方法，自己本身不需要处理方法 -->　
　<-- 表单校验的时候，可以表单校验成功了之后再去触发父元素方法  -->
  <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>