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

心已赠人 2022-11-03 04:12 370阅读 0赞

用两个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>

使用上面这种方式，子页面基本上不需要处理什么业务逻辑，所有方法都由父页面实现，这样就可以把子页面随意引用到其他地方去使用，也是官方文档中的样例。