<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"
>