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

Posted 2021-03-05 菜小牛

用两个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：父页面只管打开和关闭，逻辑方法交给子页面自己实现：

未完待续吧，我也不知道这两种方法哪个好点