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

相关推荐
云和数据.ChenGuang1 天前
vue中构建脚手架
前端·javascript·vue.js
q_19132846951 天前
基于RuoYi框架+Mysql的汽车进销存后台管理系统
数据库·vue.js·spring boot·mysql·汽车·个人开发·若依
code_Bo1 天前
基于vxe-table进行二次封装
前端·javascript·vue.js
梦6501 天前
axios请求
vue.js
源力祁老师1 天前
OWL与VUE3 的高级组件通信全解析
前端·javascript·vue.js
小六路1 天前
可以横跨时间轴,分类显示的事件
前端·javascript·vue.js
Nayana1 天前
Element-Plus源码分析-select组件
vue.js
洛小豆1 天前
她问我::is-logged 是啥?我说:前面加冒号,就是 Vue 在发暗号
前端·vue.js·面试
麦麦大数据1 天前
F024 CNN+vue+flask电影推荐系统vue+python+mysql+CNN实现
vue.js·python·cnn·flask·推荐算法
博客zhu虎康1 天前
Element中 el-tree 如何隐藏 Tree 组件中的父节点 Checkbox
javascript·vue.js·elementui