dialog.vue
<template>
<el-dialog
class="com_dialog"
:visible.sync="visible"
v-bind="$attrs"
:close-on-click-modal="closeOnClickModal"
:close-on-press-escape="closeOnPressEscape"
@open="open"
@opened="opened"
@close="Cancel"
@closed="closed"
>
<slot></slot>
<span v-if="!$slots.footer" slot="footer" class="dialog-footer" v-show="footShow">
<el-button @click="Cancel" v-if="cancelShow">{{ cancelText }}</el-button>
<el-button type="primary" @click="Submit" v-if="submitShow">{{ submitText }}</el-button>
</span>
<div v-else class="com_footer" v-show="footShow">
<slot name="footer" />
</div>
</el-dialog>
</template>
<script>
export default {
inheritAttrs: true,
props: {
footShow: {
type: Boolean,
default: true
},
cancelShow: {
type: Boolean,
default: true
},
cancelText: {
type: String,
default: '取消'
},
submitShow: {
type: Boolean,
default: true
},
submitText: {
type: String,
default: '确定'
},
closeOnClickModal: {
type: Boolean,
default: false
},
closeOnPressEscape: {
type: Boolean,
default: false
},
show: {
type: Boolean,
default: false
},
},
computed: {
visible: {
get() {
return this.show;
},
set(val) {
this.$emit("update:show", val);
}
}
},
methods: {
Cancel() {
this.$emit("Cancel");
},
Submit() {
this.$emit("Submit");
},
closed() {
this.$emit("closed");
},
open() {
this.$emit("open");
},
opened() {
this.$emit("opened");
},
}
};
</script>
<template>
<div class="test">
<el-button @click="handleClick" type="danger">点击显示</el-button>
<!-- 自定义footer,无须绑定submitPopupData方法 -->
<Dialog
title="规则克隆"
:show.sync="visible"
v-if="visible"
:before-close="handleClose"
width="60%"
@Cancel="resetCopyPopup"
@Submit="zz"
>
<div>内容</div>
<!-- <span slot="footer" class="dialog-footer">
<el-button type="primary" @click="visible = false">保存</el-button>
</span>-->
</Dialog>
</div>
</template>
<script>
import Dialog from './dialog.vue'
export default {
components: {
Dialog
},
data() {
return {
visible: true
};
},
methods: {
zz() { },
resetCopyPopup() {
// 可在此做一些重置操作，如清除表单数据以及关闭弹框等
// this.visible = false;
},
handleClick() {
this.visible = true;
},
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => { });
}
}
}
</script>
<style lang="scss" >
.dialog-footer {
padding: 10 px 20 px 20 px;
text-align: right;
box-sizing: border-box;
}
</style>
