vue 上传组件 vxe-upload 图片和附件拖拽调整顺序

news/2024/12/16 20:25:17/文章来源:https://www.cnblogs.com/qaz666/p/18611061

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

官网:https://vxeui.com/

图片拖拽排序

<template><div><vxe-upload v-model="imgList" mode="image" multiple drag-sort></vxe-upload></div>
</template><script>
export default {data () {const imgList = [{ 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' }]return {imgList}}
}
</script>

附件拖拽排序

<template><div><vxe-upload v-model="fileList" multiple drag-sort></vxe-upload></div>
</template><script>
export default {data () {const fileList = [{ name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg' },{ name: 'fj581.jpeg', url: 'https://vxeui.com/resource/img/fj581.jpeg' },{ name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' },{ name: 'fj579.png', url: 'https://vxeui.com/resource/img/fj579.png' },{ name: 'fj586.png', url: 'https://vxeui.com/resource/img/fj586.png' }]return {fileList}}
}
</script>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/853960.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

arm安装数据库

https://blog.csdn.net/wochunyang/article/details/132883654https://blog.csdn.net/qq_43690482/article/details/132168349https://www.cnblogs.com/wshisboy/p/16374015.htmlhttps://www.cnblogs.com/windandchimes/p/18344463 首先先看麒麟系统的版本CPU对应版本。 cat /p…

12月做题记录

whk恐怖如斯,仅补两周即可让呆猫失去大脑12月做题记录✩ trick ✯ 会大部分,要\(tj\)提示 ✬ 会小部分/完全没想到,看了\(tj\)才会 ◈ 脑电波 ✡ 有某一算法的神秘通用性质 ⊗ 待补目录12月做题记录CF1725K Kingdom of CriticismCF1446D2 Frequency Problem (Hard Version)根…

Vulnhub nxy

0x01:端口扫描 主机发现 nmap -sn 10.10.10.0/24全端口扫描 nmap --min-rate 10000 -p- 10.10.10.132UDP扫描 nmap -sU --top=20 10.10.10.132详细端口扫描 nmap -sT -sC -sV -O --min-rate 10000 -p22,80 10.10.10.132漏洞扫描 nmap --script=vuln -p22,80 10.10.10.1320x02:…

2024ciscn 逆向ezCsky和dump详解

ezCsky Exeinfo看了不是exeIDA分析不了,使用鸡爪Ghidra进行分析。这边顺带讲一下Ghidra的基础操作方法 下载Ghidra:https://gitcode.com/gh_mirrors/gh/ghidra_installer 下载java11(对版本有要求) 打开.bat文件第一次用需要先输入jar文件所在的地址,比如我的就是 C:\Pro…

如何将java私有库(jar)提交至公服/公共仓库(central repository)-手动版

如何将java私有库(jar)提交至公服/公共仓库(central repository)-手动版 准备GunPG(用于asc签名) 项目代码(建议是maven结构的) sonatype账号(https://central.sonatype.com/api/auth/login) Maven Helper(Idea插件,maven命令快捷插件) github或gitee账号(用于注册sonatype的N…

如何设计一个有效曝光的框架

本文主要介绍如何设计一个有效曝光的框架。先阐述有效曝光的概念及产生原因,接着围绕View标识、数据存储、曝光计算、曝光缓存、曝光策略、框架可扩展性等展开,包括View的唯一ID标识、数据存储的作用、曝光的面积和时长计算、缓存处理、框架策略扩展方式等,最后指出实现需考…

QT项目文本编辑器开发(2)

本章节接着上文,实现文本编辑器的新内容创建。 首先我们创建一个新的MyChildWnd 按照以下内容添加我们的代码:class MyChildWnd : public QTextEdit {Q_OBJECTpublic:MyChildWnd();QString myCurDocPath;void newDoc(); //创建新文档QString getCurDocName();bool loadDoc();…

QT 自动伸缩的工具栏和自定义配置的工具栏 QToolBar更多按钮的样式设置

1.实现目标 如下图所示,播放窗口的工具栏,有很多按钮,当窗口的宽度不够时,能够自动生成更多按钮,点击更过按钮就会出现多余按钮的menu菜单;2。实现方法 一开始我还想着加个按钮控件,在播放窗口resize函数中判断工具栏的宽度能容纳几个按钮,判断宽度是否够,如果不够的话…

诊断工具——找到泄漏点

C#若出现内存泄漏时可通过如下方式进行查找。 多次运行后在VS的诊断工具中截取内存快照, 然后点开内存快照,查看托管内存信息,如下图: 上图中PerspectiveViewModel是PerspectiveView页面的VM,理论上只有打开它时才会创建1个,离开这个页面时它会被GC回收。但通过多次进入…

海山数据库(He3DB)源码解读:T_DropRoleSetStmt原理浅析

一、概述DropRoleStmt 表示删除角色的 DDL 语句。。 二、DropRole 命令的执行流程PostgresMain exec_simple_query →执行简单的 SQL 查询; StartTransactionCommand → 开始事务; pg_parse_query →解析为内部的抽象语法树(AST); PortalRun standard_ProcessUtility →权限…

【Adobe Dimension 2024下载与安装】

1、安装包 我用夸克网盘分享了「Dimension 2024」 链接:下载地址 2、安装教程(安装前关闭系统防护) 1) 下载软件安装包,双击Set-up.exe安装2) 修改安装目录,点击继续3) 安装完成,点击启动4) 启动程序

【教程】任务管理(高级)打造完整的项目管理平台

通过循序渐进的功能升级,你将打造一个强大的管理系统,让团队协作更高效、流程更智能。前言 亲爱的读者,恭喜你已经成功搭建了基础的任务管理系统!不过,这仅仅是开始。就像盖房子一样,我们已经打好了地基,接下来要一层层建起更高的楼层,让这个系统变得更加完善和强大。 …