el-dialog弹框组件

说明

参数	说明	类型	可选值	默认值
title	标题	String	-	提示
visible	弹框控制	Boolean	-	false
text	文本	String	-	文本信息
data	接收的数据	Object	-	-
center	是否居中	Boolean	-	false

代码

• 子组件

<template>
    <div>
        <el-dialog
            :title="title"
            :visible="visible"
            width="30%"
            :modal="false"
            top="0"
            class="dialog"
            :before-close="dialogVisible"
        >
            <span class="content" v-html="text"></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        // 标题
        title: {
            type: String,
            default: '提示'
        },
        // 弹框控制
        visible: {
            type: Boolean,
            default: false
        },
        // 文本
        text: {
            type: String,
            default: '文本信息'
        },
        // 接收的数据
        data: {
            type: Object,
            default: () => {}
        },
        // 是否居中
        center: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        dialogVisible() {
            this.$emit('update:visible', false);
        },
        submit() {
            this.$emit('submit', `${this.title}再次确认按钮`);
        }
    }
};
</script>

<style lang="scss">
.dialog{
    .content {
        display: block;
        text-align: center;
    }
}
</style>

• 父组件调用

<template>
    <div>
        <el-button @click="del_content">测试</el-button>
        <hb-dialog
            :title="textObj.title"
            :visible.sync="textObj.visible"
            :text="textObj.text"
            :center="textObj.center"
            @submit="del_text"
        >
        </hb-dialog>
    </div>
</template>

<script>
import hbDialog from '@/components/hb-dialog.vue';
export default {
    components: {
        hbDialog
    },
    data() {
        return {
            textObj: {
                visible: false, // 控制弹框
                title: '', // 标题
                text: '', // 内容
                data: {}, // 要删除的内容
                center: '' // 是否居中显示
            }
        };
    },
    methods: {
        del_content() {
            this.textObj.visible = true;
            this.textObj.title = '删除';
            this.textObj.text = '你确定要删除吗？';
        },
        del_text(val) {
            console.log(val); // 删除再次确认按钮提示
            this.textObj.visible = false;
            this.$message.success('删除成功');
        }
    }
};
</script>