Vue |
您所在的位置：网站首页 › vue怎么打开 › Vue |
Vue
|
转载自作者：佳瑞Jarrett 链接：Vue-grid-layout实现web拖拽布局功能-知乎 (zhihu.com) 来源：知乎 著作权归作者所有。商业转载请联系作者进行授权，非商业转载请注明出处。 最近在完成web端在线绘图功能时，需要开发一个从左侧拖拽一种图标到画布中。调研了非常多种现在做拖拽布局的组件，调研的地址是：https://vuejsexamples.com/tag/drag/  该网站提供了非常多的拖拽解决方案 经过比较，选择了一款优秀的可拖拽框架，Vue-Grid-Layout。 npm安装npm install vue-grid-layout --save使用demo {{item.i}} layout: [ {"x":0,"y":0,"w":2,"h":2,"i":"0"}, {"x":2,"y":0,"w":2,"h":4,"i":"1"}, {"x":4,"y":0,"w":2,"h":5,"i":"2"}, {"x":6,"y":0,"w":2,"h":3,"i":"3"}, ],参数说明layout： 选择组件的列表，Array类型。数组中的每个项目必须有i，x，y，w和h属性。responsiveLayouts： 响应式布局，非必须。colNum：指明画布中一共多少列，默认为12列。rowHeight： 一行所占的高度，单位为像素。maxRows：最大的行数，默认为无限。margin：项目的空白值，默认为[10, 10]。isDraggable: 是否可拖拽。isResizable： 是否可以变换尺寸。isMirrored：默认从左到右排序，开启以后从右到左。autoSize： 根据组件里的内容，自适应高度。verticalCompact： 垂直方向上是否受影响，如果关闭的话，组件可以有空缺。preventCollision： 避免碰撞，默认为false。useCssTransformsresponsivebreakpointscols： 总的列数。useStyleCursor：未知。Griditem的参数i: 每个组件的唯一id，这个参数是必须的。x：标识栅格元素位于第几列，需为自然数。y：标识栅格元素位于第几行，需为自然数。w：标识栅格元素的初始宽度，值为colWidth的倍数。h：标识栅格元素的初始高度，值为rowHeight的倍数。minW：栅格元素的最小宽度，值为colWidth的倍数。如果w小于minW，则minW的值会被w覆盖。minH：栅格元素的最小高度，值为rowHeight的倍数。如果h小于minH，则minH的值会被h覆盖。maxW栅格元素的最大宽度，值为colWidth的倍数。如果w大于maxW，则maxW的值会被w覆盖。maxH栅格元素的最大高度，值为rowHeight的倍数。如果h大于maxH，则maxH的值会被h覆盖。isDraggable：标识栅格元素是否可拖拽。如果值为null则取决于父容器。isResizable：标识栅格元素是否可调整大小。如果值为null则取决于父容器。static：标识栅格元素是否为静态的（无法拖拽、调整大小或被其他元素移动）。dragIgnoreFrom：标识栅格元素中哪些子元素无法触发拖拽事件，值为css-like选择器。dragAllowFrom：标识栅格元素中哪些子元素可以触发拖拽事件，值为css-like选择器。如果值为null则表示所有子元素（dragIgnoreFrom的除外）。resizeIgnoreFrom标识栅格元素中哪些子元素无法触发调整大小的事件，值为css-like选择器。限制可拖拽区域如果我们希望可拖拽的组件中，内部是可以单独点击的，那么就需要就拖拽的区域分隔。这里官方提供了参数，可以指定哪些区域是可以拖拽的，哪些区域会被忽略，从而被忽略的区域可以单独进行点击。 {{item.i}} click限制特定区域可以进行拖拽  从外部拖拽组件到画布中在我们的应用中希望，组件能够从左侧拖到画布中，而再进行拖拽，所以我们在右侧需要先写一个区域是用来被拖拽的。在备选拖拽区域用两个方法来进行触发。 Droppable Element (Drag me!)具体的代码可以参考官方代码。 Displayed as [x, y, w, h]: {{ item.i }}: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}] Droppable Element (Drag me!) {{ item.i }} 从外部拖拽到画布中 其他更多的官方说明，请参考https://jbaysolutions.github.io/vue-grid-layout/。 该组件是非常强大和灵活的，官方提供的文档也比较全面、易懂。 如果您觉得上面的内容对您有帮助欢迎点赞、评论、转发！更多内容请查阅作者博客：https://jiaruiblog.com或者作者github: https://github.com/Jarrettluo? |
【本文地址】
今日新闻 |
推荐新闻 |