middleground_code_v2/src/views/DataCenterOptions/compoments/baseDialog.vue

100 lines
1.9 KiB
Vue

<template>
<el-dialog
class="base-dialog"
:title="title"
:visible.sync="dialogVisible"
:width="width"
:fullscreen="false"
append-to-body
top="5vh"
:close-on-click-modal="false"
@open="$emit('open')"
@close="$emit('close')"
>
<slot></slot>
<span slot="footer" class="dialog-footer" v-if="footerShow">
<el-button @click="closeHandle"> </el-button>
<el-button v-if="resetting"> </el-button>
<el-button
type="primary"
v-if="!lookFlag"
:loading="loading"
@click="handleConfirmClick"
> </el-button
>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
fullscreen: {
type: Boolean,
default: false,
},
value: Boolean,
title: String,
lookFlag: {
type: Boolean,
default: false,
},
loading: {
type: Boolean,
default: false,
},
resetting: {
type: Boolean,
default: false,
},
footerShow: {
type: Boolean,
default: true,
},
width: {
type: String,
default: "80%",
},
},
data() {
return {};
},
computed: {
dialogVisible: {
get() {
return this.value;
},
set(val) {
this.$emit("input", val);
},
},
},
methods: {
closeHandle() {
this.dialogVisible = false;
return
this.$confirm("是否关闭表单?", "提示", {
confirmButtonText: "关闭",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.dialogVisible = false;
})
.catch(() => {});
},
handleConfirmClick() {
this.$emit("confirm");
},
},
beforeDestroy() {
console.log(11);
},
};
</script>
<style scoped>
.base-dialog >>> .el-dialog__body {
max-height: 80vh;
overflow: auto;
}
</style>