el-dialog组件封装

最新推荐文章于 2025-09-16 11:31:56 发布

原创最新推荐文章于 2025-09-16 11:31:56 发布 · 644 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

<template>
    <el-dialog
        :title="title"
        :visible.sync="formVisible"
        :width="width"
        @close="close">
        <slot/>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    props:{
        title:{
            type:String,
        },
        width:{
            type:String,
        },
        dialogVisible:{
            type:Boolean,
            default:()=>false
        },
    },
    data(){
        return{
        }
    },
    computed:{
        formVisible:{
            get(){
                return this.dialogVisible;
            },
            set(){
                this.close();
            }
        }
    },
    methods:{
        close(){
            this.$emit('close');
        },
        //确认
        submit(){
            this.$emit('submit');
            this.closeDialog();
        }
    }
}
</script>
<style lang="less" scoped>

</style>

在父组件调用

<DialogTest

:title="title"

:dialog-visible="dialogFormVisible"

@close="dialogFormVisible=false"

@submit="submit"