From dae8c5016c0b8894119618754acfe509123d2f91 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期三, 30 四月 2025 10:29:32 +0800
Subject: [PATCH] 上传组件新增拖动排序属性
---
src/components/ImageUpload/index.vue | 28 +++++++++++++++++++++++++---
src/components/FileUpload/index.vue | 29 ++++++++++++++++++++++++++++-
2 files changed, 53 insertions(+), 4 deletions(-)
diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index 49ead36..d217897 100644
--- a/src/components/FileUpload/index.vue
+++ b/src/components/FileUpload/index.vue
@@ -42,6 +42,7 @@
<script setup>
import { getToken } from "@/utils/auth"
+import Sortable from 'sortablejs'
const props = defineProps({
modelValue: [String, Object, Array],
@@ -78,6 +79,11 @@
disabled: {
type: Boolean,
default: false
+ },
+ // 鎷栧姩鎺掑簭
+ drag: {
+ type: Boolean,
+ default: true
}
})
@@ -205,9 +211,29 @@
}
return strs != '' ? strs.substr(0, strs.length - 1) : ''
}
-</script>
+// 鍒濆鍖栨嫋鎷芥帓搴�
+onMounted(() => {
+ if (props.drag) {
+ nextTick(() => {
+ const element = document.querySelector('.upload-file-list')
+ Sortable.create(element, {
+ ghostClass: 'file-upload-darg',
+ onEnd: (evt) => {
+ const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
+ fileList.value.splice(evt.newIndex, 0, movedItem)
+ emit('update:modelValue', listToString(fileList.value))
+ }
+ })
+ })
+ }
+})
+</script>
<style scoped lang="scss">
+.file-upload-darg {
+ opacity: 0.5;
+ background: #c8ebfb;
+}
.upload-file-uploader {
margin-bottom: 5px;
}
@@ -216,6 +242,7 @@
line-height: 2;
margin-bottom: 10px;
position: relative;
+ transition: none !important;
}
.upload-file-list .ele-upload-list__item-content {
display: flex;
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index 04e3f43..89cc790 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -49,6 +49,7 @@
<script setup>
import { getToken } from "@/utils/auth"
import { isExternal } from "@/utils/validate"
+import Sortable from 'sortablejs'
const props = defineProps({
modelValue: [String, Object, Array],
@@ -64,23 +65,28 @@
// 鍥剧墖鏁伴噺闄愬埗
limit: {
type: Number,
- default: 5,
+ default: 5
},
// 澶у皬闄愬埗(MB)
fileSize: {
type: Number,
- default: 5,
+ default: 5
},
// 鏂囦欢绫诲瀷, 渚嬪['png', 'jpg', 'jpeg']
fileType: {
type: Array,
- default: () => ["png", "jpg", "jpeg"],
+ default: () => ["png", "jpg", "jpeg"]
},
// 鏄惁鏄剧ず鎻愮ず
isShowTip: {
type: Boolean,
default: true
},
+ // 鎷栧姩鎺掑簭
+ drag: {
+ type: Boolean,
+ default: true
+ }
})
const { proxy } = getCurrentInstance()
@@ -216,6 +222,22 @@
}
return strs != "" ? strs.substr(0, strs.length - 1) : ""
}
+
+// 鍒濆鍖栨嫋鎷芥帓搴�
+onMounted(() => {
+ if (props.drag) {
+ nextTick(() => {
+ const element = document.querySelector('.el-upload-list')
+ Sortable.create(element, {
+ onEnd: (evt) => {
+ const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
+ fileList.value.splice(evt.newIndex, 0, movedItem)
+ emit('update:modelValue', listToString(fileList.value))
+ }
+ })
+ })
+ }
+})
</script>
<style scoped lang="scss">
--
Gitblit v1.9.3