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

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;


 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">