更新 upload 插件

jqmin19 · jqmin19 · commit 94dadcafc27a · 2024-03-16T10:43:11.000+08:00
diff --git a/src/plugins/upload/components/upload-item/index.vue b/src/plugins/upload/components/upload-item/index.vue
@@ -77,22 +77,30 @@
 					<!-- 工具 -->
 					<div class="cl-upload-item__actions">
 						<template v-if="media.isMedia">
-							<el-icon @click.stop="media.pause()" v-if="item.isPlay">
+							<el-icon
+								class="action-pause"
+								@click.stop="media.pause()"
+								v-if="item.isPlay"
+							>
 								<video-pause />
 							</el-icon>
 
-							<el-icon @click.stop="media.play()" v-else>
+							<el-icon class="action-play" @click.stop="media.play()" v-else>
 								<video-play />
 							</el-icon>
 						</template>
 
 						<template v-else>
-							<el-icon @click.stop="preview">
+							<el-icon class="action-preview" @click.stop="preview">
 								<zoom-in />
 							</el-icon>
 						</template>
 
-						<el-icon @click.stop="remove" v-if="!disabled || deletable">
+						<el-icon
+							class="action-delete"
+							@click.stop="remove"
+							v-if="!disabled || deletable"
+						>
 							<delete />
 						</el-icon>
 					</div>
diff --git a/src/plugins/upload/components/upload.vue b/src/plugins/upload/components/upload.vue
@@ -6,7 +6,8 @@
 				`cl-upload--${type}`,
 				{
 					'is-disabled': disabled,
-					'is-multiple': multiple
+					'is-multiple': multiple,
+					'is-small': small
 				}
 			]"
 		>
@@ -59,6 +60,7 @@
 							:disabled="disabled"
 						>
 							<slot>
+								<!-- 拖拽方式 -->
 								<div class="cl-upload__demo is-dragger" v-if="drag">
 									<el-icon :size="46">
 										<upload-filled />
@@ -68,6 +70,7 @@
 									</div>
 								</div>
 
+								<!-- 点击方式 -->
 								<div class="cl-upload__demo" v-else>
 									<el-icon :size="36">
 										<component :is="icon" v-if="icon" />
@@ -109,6 +112,15 @@
 									:deletable="deletable"
 									@remove="remove(index)"
 								/>
+
+								<!-- 小图模式 -->
+								<el-icon
+									class="cl-upload__item-remove"
+									v-if="small"
+									@click="remove(index)"
+								>
+									<circle-close-filled />
+								</el-icon>
 							</div>
 						</slot>
 					</el-upload>
@@ -123,7 +135,7 @@ import { computed, ref, watch, type PropType, nextTick } from "vue";
 import { isArray, isEmpty, isNumber } from "lodash-es";
 import VueDraggable from "vuedraggable";
 import { ElMessage } from "element-plus";
-import { PictureFilled, UploadFilled } from "@element-plus/icons-vue";
+import { PictureFilled, UploadFilled, CircleCloseFilled } from "@element-plus/icons-vue";
 import { useForm } from "@cool-vue/crud";
 import { useCool } from "/@/cool";
 import { useBase } from "/$/base";
@@ -159,6 +171,8 @@ const props = defineProps({
 	},
 	// 元素大小
 	size: [String, Number, Array],
+	// 小图模式
+	small: Boolean,
 	// 显示图标
 	icon: null,
 	// 显示文案
@@ -476,7 +490,7 @@ defineExpose({
 	}
 
 	&__list {
-		display: inline-flex;
+		display: flex;
 		flex-wrap: wrap;
 	}
 
@@ -558,9 +572,50 @@ defineExpose({
 	}
 
 	&.is-multiple {
+		.cl-upload__list {
+			margin-bottom: -5px;
+		}
+
 		.cl-upload__item {
 			margin: 0 5px 5px 0;
 		}
+
+		.cl-upload__footer {
+			margin-bottom: 5px;
+		}
+	}
+
+	&.is-small {
+		.cl-upload__demo {
+			.el-icon {
+				font-size: 20px !important;
+			}
+
+			.text {
+				display: none;
+			}
+		}
+
+		.cl-upload__item-remove {
+			position: absolute;
+			right: 0px;
+			top: 0px;
+			color: var(--el-color-danger);
+			background-color: #fff;
+			border-radius: 100%;
+		}
+
+		:deep(.cl-upload-item) {
+			.cl-upload-item__progress-bar,
+			.cl-upload-item__actions,
+			.cl-upload-item__tag {
+				display: none;
+			}
+
+			.cl-upload-item__progress-value {
+				font-size: 12px;
+			}
+		}
 	}
 
 	&:not(.is-disabled) {
diff --git a/src/plugins/upload/config.ts b/src/plugins/upload/config.ts
@@ -5,8 +5,8 @@ export default (): ModuleConfig => {
 		label: "文件上传",
 		description: "基于 el-upload 封装的文件上传组件",
 		author: "COOL",
-		version: "1.1.3",
-		updateTime: "2024-03-13",
+		version: "1.2.1",
+		updateTime: "2024-03-15",
 		demo: [
 			{
 				name: "基础用法",
@@ -16,6 +16,10 @@ export default (): ModuleConfig => {
 				name: "多图上传",
 				component: () => import("./demo/multiple.vue")
 			},
+			{
+				name: "小图模式",
+				component: () => import("./demo/small.vue")
+			},
 			{
 				name: "文件上传",
 				component: () => import("./demo/file.vue")
diff --git a/src/plugins/upload/demo/custom.vue b/src/plugins/upload/demo/custom.vue
@@ -18,7 +18,7 @@ import { Upload } from "@element-plus/icons-vue";
 		border: 1px solid var(--el-border-color);
 		border-radius: 4px;
 		padding: 5px 10px;
-		margin-bottom: 10px;
+		margin-bottom: 5px;
 		font-size: 12px;
 		width: 100%;
 		box-sizing: border-box;
diff --git a/src/plugins/upload/demo/small.vue b/src/plugins/upload/demo/small.vue
@@ -0,0 +1,9 @@
+<template>
+	<cl-upload v-model="value" small multiple draggable :size="50" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const value = ref("");
+</script>
