#挑战30天在头条写日记#
Vue 拖拽组件库(drag-and-drop)组件在使用 Vue 框架开发中非常常见的需求,做个内容行排序,拖拽小组件到网页上这类都需要用到拖拽组件。本文记录了我自己用过的 6 款 Vue 拖拽组件库,它们各有各的特点,推荐给大家。
Vue.Draggable 必须第一个推荐,Vue 拖拽组件里的王者,适应大多数应用场景,流畅顺滑。Vue.Draggable 基于 Sortable.js(一款轻量级拖拽排序 JS 插件) 开发的 Vue 拖拽组件。
扩展阅读:《最好用的 7 个 Vue Tree select 树形组件》
vue-drag-resize 支持拖拽和缩放两个大动作,轻量级,无依赖,功能扎实,适合需要缩放的应用场景。
扩展阅读:《如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表》
vue-smooth-dnd 是一款简单轻量的拖拽排序 Vue 组件,封装了 smooth-dnd 库。它主要包含两个组件,Draggable 和 Container;Container 包含了可拖动的元素,它的每一个子元素都被 Draggable 包裹着,也就是说,每一个子元素都带有可拖拽的属性。
扩展阅读:《如何在 Vue 中导出数据至 Excel 表格》
v-drag 简单好用的 Vue 拖拽组件,对触摸事件友好支持。作者对 V-drag 的定位是快速让 Vue 集成拖拽功能,让 v-drag 包裹的元素快速实现拖拽移动功能。
扩展阅读:《如何在 Vue 中加入图表 - Vue echarts 使用教程》
Vue-Easy-DnD 就如他的名字一样简单快捷,没有任何啰嗦的功能,支持键盘事件,支持 SSR ,支持触摸事件。
扩展阅读:《顶级好用的 5 款 Vue table 表格组件测评与推荐》
Awe-dnd 支持桌面和移动端,有简单动画效果,轻巧简洁,没有太多多余功能。
https://gitee.com/china-bin/vdesjs
官方文档: http://china-bin.gitee.io/vdesjs/ 预览地址: http://china-bin.gitee.io/vdesjs/demo/#/
页面更新:2024-04-29
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号