一个vue的可拖拽的瀑布流布局组件

lordharrd 发布于2019-08-20 18:53 / 3811人阅读

摘要：是一个功能强大的瀑布流布局组件。支持用户拖拽和对改变元素大小，并提供相应的事件进行自定义操作。而且布局可以存储和再展现。

vue-grid-layout是一个功能强大的瀑布流布局组件。支持用户拖拽和对改变元素大小，并提供相应的事件进行自定义操作。而且布局可以存储和再展现。

安装

通过NPM安装

npm install vue-grid-layout

插件应用

这是一个使用的例子

var testLayout = [
        {"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"},
        {"x":8,"y":0,"w":2,"h":3,"i":"4"},
        {"x":10,"y":0,"w":2,"h":3,"i":"5"},
        {"x":0,"y":5,"w":2,"h":5,"i":"6"},
        {"x":2,"y":5,"w":2,"h":5,"i":"7"},
        {"x":4,"y":5,"w":2,"h":5,"i":"8"},
        {"x":6,"y":4,"w":2,"h":4,"i":"9"},
        {"x":8,"y":4,"w":2,"h":4,"i":"10"},
        {"x":10,"y":4,"w":2,"h":4,"i":"11"},
        {"x":0,"y":10,"w":2,"h":5,"i":"12"},
        {"x":2,"y":10,"w":2,"h":5,"i":"13"},
        {"x":4,"y":8,"w":2,"h":4,"i":"14"},
        {"x":6,"y":8,"w":2,"h":4,"i":"15"},
        {"x":8,"y":10,"w":2,"h":5,"i":"16"},
        {"x":10,"y":4,"w":2,"h":2,"i":"17"},
        {"x":0,"y":9,"w":2,"h":3,"i":"18"},
        {"x":2,"y":6,"w":2,"h":2,"i":"19"}
    ];
    
    var GridLayout = VueGridLayout.GridLayout;
    var GridItem = VueGridLayout.GridItem;
    
    new Vue({
        el: "#app",
        components: {
            GridLayout,
            GridItem,
        },
        data: {
            layout: testLayout,
        },
    });



        
            {{item.i}}

插件参数

参数	类型	默认值	说明
autoSize	Boolean	true	是否根据内容确定容器的高度
colNum	Number	12	列数
rowHeight	Number	150	行高
maxRows	Number	Infinity	最大的行高
margin	Array	[10, 10]	两个可移动元素间的距离
isDraggable	Boolean	true	是否支持推拽
isResizable	Boolean	true	是否支持改变大小
useCssTransforms	Boolean	true	是否使用自定义的过渡效果
verticalCompact	Boolean	true	是否使用verticalCompact布局
layout	Array	-	布局位置

轮子工厂--一个分享优秀的vue,angular组件的网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84829.html

分享一个功能强大的vue.js拖拽组件

摘要：介绍这是一个功能强大的可拖拽的组件。它可以自动滚动，锁定坐标系。支持拖拽时，流畅的动画效果。可以支持水平，垂直或者网格的拖拽。介绍 vue-slicksort -- 这是一个功能强大的可拖拽的vue.js组件。它可以自动滚动，锁定坐标系。支持拖拽时，流畅的动画效果。可以支持水平，垂直或者网格的拖拽。支持触摸。 DEMO showImg(https://segmentfault.co...

stefan 2019-08-26 11:34 评论0 收藏0
可拖拽的vue树形组件

摘要：工作上需要一个可以操作数据的组件，查阅了网上有组件可以满足我的要求，但是毕竟项目是用写的，所以参考着用实现了这个组件功能。工作上需要一个可以操作json数据的组件，查阅了网上有angular组件可以满足我的要求，但是毕竟项目是用vue写的，所以参考着用vue实现了这个组件功能。期间发现angular和vue的侧重点有点区别，angular比较擅长直接操作dom，但是我用vue是直接...

Scholer 2019-08-22 11:20 评论0 收藏0
使用 Drag and Drop 给Web应用提升交互体验

摘要：注意点在鼠标操作拖放期间，有一些事件可能触发多次，比如和。可拖拽元素，建议使用，设定可拖拽元素的鼠标游标，提升交互。在中使用拖拽中使用可以直接绑定到组件上。什么是 Drag and Drop （拖放）？简单来说，HTML5 提供了 Drag and Drop API，允许用户用鼠标选中一个可拖动元素，移动鼠标拖放到一个可放置到元素的过程。我相信每个人都或多或少接触过拖放，比如浏览...

legendmohe 2019-08-02 12:03 评论0 收藏0
uni-app项目瀑布流布局

摘要：地址，喜欢的可以下哦插件预览图使用教程插件代码拷贝下载后把目录下文件拷贝到自己项目目录下插件全局配置在项目里中配置如下代码插件使用页面使用瀑布流支持兼容性项目中使用都兼容 github地址，喜欢的可以star下哦插件预览图 showImg(https://segmentfault.com/img/bVbvt88?w=590&h=1048); 使用教程 1.插件代码拷贝下载后把com...

tommego 2019-08-26 10:19 评论0 收藏0
小程序之图片瀑布流（最全实现方式，额外加送懒加载）

摘要：完整代码请戳我们回到小程序，此时接口返回的数据如下可以看到每个图片都有高度了，接下来我们实现瀑布流布局，等下，我们搞下瀑布流布局的懒加载，关于小程序的懒加载，猛戳了解更多。效果图来来来，看啊看，外面的世界多好看， showImg(https://segmentfault.com/img/remote/1460000014887454?w=371&h=580); 效果图展示的是瀑布流...

rubyshen 2019-08-22 17:17 评论0 收藏0