iview之Model对话框封装

使用iview的Model对话框引发的问题：弹窗只能打开一次，或者压根触发不了。
排查后是由于不同于其他放方法传递形式，导致this.$emit无法触发父组件的方法。

要点记录：
1、父组件传递方法给子组件，要求以@on为方法名前缀。

@on-方法名="父组件方法名"

子组件调用父组件的方法：this.$emit('on-方法名');
2、对话框只要一个按钮的情况下，将取消按钮的文本设置为空，则不显示。如果设置确定按钮的文本为空则无效。
3、可以直接取用props中的开关属性，也可以另外在data中定义开关属性，将props的开关属性赋值给data的开关属性。在data中另外定义属性的方式一般用于
需要在子组件中对该属性做其他的逻辑处理。
4、通过监听props中的开关属性，实现开关切换。
5、在没有标题的情况下，不显示右上角的关闭按钮，可设置closable属性值为false。文中的方式是将右上角的关闭按钮与标题绑定，在没有标题的情况下不显
示右上角的关闭按钮。
拓展：对于组件封装，都是为了可以重复使用的原因。但往往相同中总会有一些小变动，比如A、B弹窗要求的按钮颜色不一样，这时候可以通过增加样式传递的
方式，或者传递不同的class名，在子组件中做不同的按钮样式定义，加入具体注释，就可以不用重复的新建相同组件了。

完整代码

父组件调用：

<div>
   <Button type="primary" @click="modal3 = true">封装对话框组件</Button>
  <md :modelVisible="modal3" 
  :title="''"
  :cancelText="''" 
  @on-close-cancel="closeModel"
  @on-open="openModel">
      <Button type="primary" @click="modal1 = true">Display dialog box</Button>
  </md>
</div>

父组件脚本：

import md from '../../components/ModalDynamic';
export default {
    name: "",
    data() {
        return{
            modal3: false
        };
    },
    components:{
        md
    },
    methods: {
        closeModel() {
            console.log('弹窗关闭');
            this.modal3 = false
        },
        openModel(obj) {
            console.log('弹窗关闭并返回弹窗数据', obj);
            this.modal3 = false
        }
    }
}

子组件：

<template>
    <div class="yu-dynamic-model">
        <Modal
            v-model="modelVisible"
            :width="width"
            :scrollable="true"
            :closable="closableRight"
            :ok-text="okText"
            :cancel-text="cancelText"
            :mask-closable="false">
            <slot />
            <div v-if="title" slot="header" class="model-header">
                <span>{{title}}</span>
            </div>
            <div slot="footer" class="model-footer">
                <Button v-if="cancelText" @click="cancel">{{ cancelText }}</Button>
                <Button v-if="okText" type="primary" @click="ok">{{ okText }}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    name: "",
    props: {
        modelVisible: {
            type: Boolean,
            default: () => false
        },
        title: {
            type: String,
            default: ''
        },
        okText: {
            type: String,
            default: '确定'
        },
        cancelText: {
            type: String,
            default: '取消'
        },
        width:{
            type: Number,
            default: 50
        }
    },
    data() {
        return{
            modelShow: this.modelVisible,
            closableRight: this.title ? true : false
        }
    },
    watch: {
        modelVisible: {
            handler: function(n, o){
                this.modelShow = n;
            }
        }
    },
    methods: {
        ok() {
            this.modelShow = false;
            this.$emit('on-open',false);
        },
        cancel() {
            this.modelShow = false;
            this.$emit('on-close-cancel', false);
        }
    }
}
</script>