166 lines
3.2 KiB
Vue
166 lines
3.2 KiB
Vue
<template>
|
|
<section class="ai-dialog__wrapper">
|
|
<el-dialog
|
|
custom-class="ai-dialog"
|
|
v-on="$listeners"
|
|
v-if="isEmpty"
|
|
:close-on-click-modal="closeOnClickModal"
|
|
v-bind="$attrs"
|
|
:destroy-on-close="destroyOnClose"
|
|
:visible.sync="dialogVisible">
|
|
<div class="ai-dialog__header" slot="title">
|
|
<h2>{{ title }}</h2>
|
|
</div>
|
|
<div class="ai-dialog__content" :style="{'max-height': isScrool ? '500px' : 'auto'}">
|
|
<div class="ai-dialog__content--wrapper" :style="{'padding-right': isScrool ? '8px' : '0'}">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
<template v-if="customFooter" slot="footer">
|
|
<slot name="footer"></slot>
|
|
</template>
|
|
<div v-else class="dialog-footer" slot="footer">
|
|
<el-button @click="onCancel">取消</el-button>
|
|
<el-button @click="onConfirm" type="primary" style="width: 92px;">确认</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AiDialog',
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
customFooter: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
'close-on-click-modal': {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
destroyOnClose: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
isScrool: true,
|
|
isEmpty: true
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
visible: {
|
|
handler(val) {
|
|
this.dialogVisible = val
|
|
|
|
// if (val) {
|
|
// this.$nextTick(() => {
|
|
// setTimeout(() => {
|
|
// this.isScrool = document.querySelector('.ai-dialog__content') && document.querySelector('.ai-dialog__content').clientHeight >= 500
|
|
// }, 100)
|
|
// })
|
|
// }
|
|
|
|
if (this.destroyOnClose && !val) {
|
|
setTimeout(() => {
|
|
this.isEmpty = false
|
|
|
|
setTimeout(() => {
|
|
this.isEmpty = true
|
|
}, 50)
|
|
}, 500)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
},
|
|
|
|
methods: {
|
|
onCancel() {
|
|
this.$emit('update:visible', false)
|
|
this.$emit('onCancel')
|
|
this.$emit('cancel')
|
|
},
|
|
|
|
onConfirm() {
|
|
this.$emit('onConfirm')
|
|
this.$emit('confirm')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.ai-dialog {
|
|
margin: 0 !important;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.el-dialog__body {
|
|
padding: 20px 40px 20px;
|
|
}
|
|
|
|
.ai-dialog__content {
|
|
overflow-y: auto;
|
|
padding-bottom: 4px;
|
|
|
|
.ai-dialog__content--wrapper {
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
overflow-y: overlay;
|
|
}
|
|
}
|
|
|
|
.ai-dialog__header {
|
|
height: 48px;
|
|
line-height: 48px;
|
|
padding: 0 16px;
|
|
border-bottom: 1px solid #eee;
|
|
|
|
h2 {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.el-dialog__footer {
|
|
padding: 16px 20px;
|
|
box-sizing: border-box;
|
|
background: #F3F6F9;
|
|
text-align: center;
|
|
|
|
& + .el-button {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.el-button {
|
|
width: 92px !important;
|
|
}
|
|
}
|
|
|
|
.el-dialog__header {
|
|
padding: 0;
|
|
}
|
|
|
|
.el-dialog__headerbtn {
|
|
top: 24px;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
</style>
|