1

lzhe

2024-09-26 7d59e8e2c727dd49d9552a8febc2af47c5b95a69

 src/components/scDialog/index.vue

@@ -9,76 +9,108 @@

<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>
      <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>
      <div v-loading="loading">
         <slot></slot>
      </div>
      <template #footer>
         <slot name="footer"></slot>
      </template>
   </el-dialog>
         <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() {
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
      },
      methods: {
         //关闭
         closeDialog(){
            this.dialogVisible = false
         },
         //最大化
         setFullscreen(){
            this.isFullscreen = !this.isFullscreen
         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);}
.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>