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 @@ + + +