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

相关推荐
markyankee1013 小时前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
翻滚吧键盘5 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹5 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
Q_970956396 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
翻滚吧键盘7 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
叹一曲当时只道是寻常8 小时前
vue中添加原生右键菜单
javascript·vue.js
markyankee10110 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
khalil10 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js
速易达网络20 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj16899721 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode