diff --git a/src/plugins/upload/components/upload-item/index.vue b/src/plugins/upload/components/upload-item/index.vue
index 607fd9e..f4b9701 100644
--- a/src/plugins/upload/components/upload-item/index.vue
+++ b/src/plugins/upload/components/upload-item/index.vue
@@ -77,22 +77,30 @@
-
+
-
+
-
+
-
+
diff --git a/src/plugins/upload/components/upload.vue b/src/plugins/upload/components/upload.vue
index 707ff94..2fbcdc0 100644
--- 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"
>
+
@@ -68,6 +70,7 @@
+
@@ -109,6 +112,15 @@
:deletable="deletable"
@remove="remove(index)"
/>
+
+
+
+
+
@@ -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
index 4870f56..4934dae 100644
--- 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
index 3612b18..efe2046 100644
--- 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
new file mode 100644
index 0000000..133f2a6
--- /dev/null
+++ b/src/plugins/upload/demo/small.vue
@@ -0,0 +1,9 @@
+
+
+
+
+