自定义组件之封装弹窗modal

最新推荐文章于 2024-02-08 17:29:11 发布

命运由我不由天

最新推荐文章于 2024-02-08 17:29:11 发布

阅读量750

点赞数

分类专栏： # Vue 前端文章标签： Vue Dialog 自定义组件弹窗

本文链接：https://blog.csdn.net/qq_42540089/article/details/103011927

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

一、需求
       在实际项目开发中，往往需要使用弹窗功能实现复核。但是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>