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

相关推荐
neon12043 分钟前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
李长鸿3 小时前
vue3中的插槽和其他
vue.js
jqq6663 小时前
解析ElementPlus打包源码(二、buildFullBundle)
前端·javascript·vue.js
知识分享小能手7 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
webYin14 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
Gazer_S15 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
小薛博客17 小时前
23、Jenkins容器化部署Vue应用
运维·vue.js·jenkins
用户516816614584119 小时前
Uncaught ReferenceError: __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not defined
前端·vue.js
熊猫片沃子19 小时前
Vue 条件与循环渲染:v-if/v-else 与 v-for 的语法简介
前端·vue.js
拜无忧20 小时前
【教程】vue+vite+ts创建一个最新的高性能后台项目架构
vue.js·typescript·vite