ui库和web端产品库合并版本(还需修复细节)

2022-11-29 18:27:14 +08:00
parent 5e4bd93238
commit 8bf6c57668
151 changed files with 28267 additions and 49 deletions
--- a/ui/packages/basic/AiDialog.vue
+++ b/ui/packages/basic/AiDialog.vue
@@ -0,0 +1,163 @@
+<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')
+			},
+
+			onConfirm () {
+				this.$emit('onConfirm')
+			}
+		}
+	}
+</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>