vue 上传组件 vxe-upload 实现拖拽调整顺序

vue 上传组件 vxe-upload 实现拖拽调整顺序,通过设置 drag-sort 参数就可以启用拖拽排序功能

官网:https://vxeui.com/

图片拖拽排序

html 复制代码
<template>
  <div>
    <vxe-upload v-model="imgList" mode="image" multiple drag-sort></vxe-upload>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const imgList = ref([
  { name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg' },
  { name: 'fj581.jpeg', url: 'https://vxeui.com/resource/img/fj581.jpeg' },
  { name: 'fj187.jpeg', url: 'https://vxeui.com/resource/img/fj187.jpeg' },
  { name: 'fj579.jpeg', url: 'https://vxeui.com/resource/img/fj579.jpeg' },
  { name: 'fj843.jpeg', url: 'https://vxeui.com/resource/img/fj843.jpeg' }
])
</script>

附件拖拽排序

html 复制代码
<template>
  <div>
    <vxe-upload v-model="fileList" multiple drag-sort></vxe-upload>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const fileList = ref([
  { name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg' },
  { name: 'fj581.jpeg', url: 'https://vxeui.com/resource/img/fj581.jpeg' },
  { name: 'fj187.jpeg', url: 'https://vxeui.com/resource/img/fj187.jpeg' },
  { name: 'fj579.jpeg', url: 'https://vxeui.com/resource/img/fj579.jpeg' },
  { name: 'fj843.jpeg', url: 'https://vxeui.com/resource/img/fj843.jpeg' }
])
</script>

https://github.com/x-extends/vxe-pc-ui

相关推荐
野生yumeko18 分钟前
伪静态WordPress/Vue
前端·javascript·vue.js
爱因斯坦乐21 分钟前
【vue】I18N国际化管理系统
前端·javascript·vue.js·笔记·前端框架
一只游鱼24 分钟前
vue集成dplayer
前端·javascript·vue.js·播放器·dplayer
技术钱7 小时前
vue3 封装图片上传预览组件支持docx、excel、pdf、图片、txt格式
vue.js·pdf·excel
一只小风华~10 小时前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
计算机学姐10 小时前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
武昌库里写JAVA11 小时前
C语言 #pragma once - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
小谭鸡米花12 小时前
高德地图电子围栏/地图选区/地图打点
前端·javascript·vue.js
好好好明天会更好13 小时前
Vue2中页面数据响应的问题
前端·javascript·vue.js
拉不动的猪13 小时前
回顾前端项目打包时--脚本引入时机与环境类型的判断问题
前端·vue.js·面试