el-dialog弹窗组件二次封装，随时随地想用就用

最新推荐文章于 2024-04-27 13:01:21 发布

社会瑶.vue

最新推荐文章于 2024-04-27 13:01:21 发布

阅读量766

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_64407944/article/details/135772766

版权

本文介绍了如何在项目开发中通过封装el-dialog弹窗组件，减少重复造轮子的困扰，提高开发效率。作者展示了如何创建一个可配置的DiaWindow.vue组件，以及如何在其他组件中使用它。

摘要由CSDN通过智能技术生成

封装优点

项目开发中el-dialog弹窗的使用非常高频，每次使用都需要监听关闭与打开重复造轮子，非常之麻烦！！

所以启动CV大法！！

在components中新建一个DiaWindow.vue文件

<template>
    <div>
        <el-dialog 
            :title="titleName" 
            :visible.sync="diaVisible" 
            :width="width" 
            :append-to-body="appendToBody"
            :before-close="handleClose" v-bind="$attrs" v-on="$listeners">
            <slot name="diaContent"></slot>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        titleName: {
            type: String,
            default: '标题',
        },
        diaVisible: {
            type: Boolean,
            default: false,
        },
        width: {
            type: String,
            default: '80%',
        },
        appendToBody: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {

        }
    },
    mounted() {

    },
    methods: {
        handleClose() {
            this.$emit('update:diaVisible', false)
        },
    },
}
</script>

<style lang="scss" scoped></style>

组件使用

<template>
    <div>
         <DiaWindow 
            :titleName="'标题'"
            :diaVisible.sync="diaView" 
            v-bind="$attrs" 
            v-on="$listeners">
                <template>
                    <div slot="diaContent">
                       <-- 定义内容写在这里 -->
                    </div>
                </template>
        </DiaWindow>
    </div>
</template>

<script>
import DiaWindow from '@/components/DiaWindow.vue';
export default {
    components: { DiaWindow, },
    data() {
        return {
            diaView: false,
        }
    },
    mounted() {

    },
    methods: {

    },
}
</script>

<style lang="scss" scoped></style>