自定义组件之封装弹窗modal

一、需求
       在实际项目开发中，往往需要使用弹窗功能实现复核。但是iview自带的modal并不完全适合项目开发。因此需要再封装一层。
二、实现
       思考：
              1、vue的v-modal自定义需要指定value的prop和使用input事件更新value的值。
       子组件：

<template>
    <Modal fullscreen="" v-model="showModal" @on-visible-change="handleVisibleChange">
        最大化
    </Modal>
</template>

<script>
    export default {
        name: "mydialog",
        props: {
            value: {
                type: Boolean
            }
        },
        watch: {
            value (nv) {
                this.showModal = nv
            }
        },
        data () {
            return {
                showModal: false
            }
        },
        methods: {
            handleVisibleChange (val) {
                this.$emit('input', val)
            }
        },
        mounted () {
            this.showModal = this.value
        }
    }
</script>

父组件调用：

<template>
<div>
    <mydialog v-model="modal"></mydialog>
    <Button @click="modal = true">Show Modal</Button>
</div>
</template>

<script>
    import mydialog from '../components/mydialog.vue'
    export default {
        name: "modal-max",
        components: {
            MyModal
        },
        data () {
            return {
                modal: false
            }
        }
    }
</script>

三、Vue官方指导资料