上传组件新增拖动排序属性

RuoYi

2025-04-30 dae8c5016c0b8894119618754acfe509123d2f91

 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;