From e87012567c674cd69f7a8f87df7202eac60a8208 Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期二, 11 六月 2024 22:28:14 +0800
Subject: [PATCH] update
---
src/components/scDialog/index.vue | 152 ++++++++++++++++++++++++++++++--------------------
1 files changed, 92 insertions(+), 60 deletions(-)
diff --git a/src/components/scDialog/index.vue b/src/components/scDialog/index.vue
index cfd065d..4c83821 100644
--- a/src/components/scDialog/index.vue
+++ b/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>
--
Gitblit v1.9.3