构建框架

2024-06-24 18:52:21 +08:00
commit 33942cbe95
328 changed files with 50716 additions and 0 deletions
@@ -0,0 +1,84 @@
+<!--
+ * @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>