<!--
|
* @Descripttion: 弹窗扩展组件
|
* @version: 2.0
|
* @Author: sakuya
|
* @Date: 2021年8月27日08:51:52
|
* @LastEditors: sakuya
|
* @LastEditTime: 2022年5月14日15:13:41
|
-->
|
|
<template>
|
<div class="sc-dialog" ref="scDialog">
|
<el-dialog ref="dialog" v-model="dialogVisible" :fullscreen="isFullscreen" v-bind="$attrs" :show-close="false">
|
<template #header>
|
<slot name="header">
|
<span class="el-dialog__title">{{ title }}</span>
|
</slot>
|
<div class="sc-dialog__headerbtn">
|
<button v-if="showFullscreen" aria-label="fullscreen" type="button" @click="setFullscreen">
|
<el-icon v-if="isFullscreen" class="el-dialog__close"><el-icon-bottom-left /></el-icon>
|
<el-icon v-else class="el-dialog__close"><el-icon-full-screen /></el-icon>
|
</button>
|
<button v-if="showClose" aria-label="close" type="button" @click="closeDialog">
|
<el-icon class="el-dialog__close"><el-icon-close /></el-icon>
|
</button>
|
</div>
|
</template>
|
<div v-loading="loading">
|
<slot></slot>
|
</div>
|
<template #footer>
|
<slot name="footer"></slot>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
modelValue: { type: Boolean, default: false },
|
title: { type: String, default: "" },
|
showClose: { type: Boolean, default: true },
|
showFullscreen: { type: Boolean, default: true },
|
loading: { type: Boolean, default: false }
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
isFullscreen: false
|
}
|
},
|
watch:{
|
modelValue(){
|
this.dialogVisible = this.modelValue
|
if(this.dialogVisible){
|
this.isFullscreen = false
|
}
|
}
|
},
|
mounted() {
|
this.dialogVisible = this.modelValue
|
},
|
methods: {
|
//关闭
|
closeDialog(){
|
this.dialogVisible = false
|
},
|
//最大化
|
setFullscreen(){
|
this.isFullscreen = !this.isFullscreen
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.sc-dialog__headerbtn {position: absolute;top: var(--el-dialog-padding-primary);right: var(--el-dialog-padding-primary);}
|
.sc-dialog__headerbtn button {padding: 0;background: transparent;border: none;outline: none;cursor: pointer;font-size: var(--el-message-close-size,16px);margin-left: 15px;color: var(--el-color-info);}
|
.sc-dialog__headerbtn button:hover .el-dialog__close {color: var(--el-color-primary);}
|
.sc-dialog:deep(.el-dialog).is-fullscreen {display: flex;flex-direction: column;top:0px !important;left:0px !important;}
|
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__header {}
|
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__body {flex:1;overflow: auto;}
|
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__footer {padding-bottom: 10px;border-top: 1px solid var(--el-border-color-base);}
|
</style>
|
