vue-grid-layout 中文文档
vue-grid-layout 中文文档
vue-grid-layout 是 gridster.js 的 vue2 版本的网格布局插件，类似于 windows 的磁贴功能，我们可以用它来实现工作台之类的自定义布局功能。
官方网站
https://github.com/jbaysolutions/vue-grid-layout
安装方式
npm install vue-grid-layout --save
或
yarn add vue-grid-layout
Demo下载
下载文件 打开项目后运行 npm i
导入组件
import VueGridLayout from 'vue-grid-layout';注册组件
export default {
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem
},
// ... data, methods, mounted (), etc.
}grid-layout属性说明
| 属性名称 | 属性说明 |
|---|---|
| col-num | 画布占几列,默认12列 |
| row-height | 每行的高度，默认150px |
| is-draggable | 是否允许拖拽布局中的单元格，默认true |
| is-resizable | 是否允许缩放布局中的单元格，默认true |
| max-rows | 定义最大行数,你把它设置成1拖拽试试就知道它的作用了 |
| margin | 布局中单元格之间的间距，如果[10,10] |
| responsive | 是否是响应式布局，比如大屏下显示5列，小屏幕下将会根据屏幕大小显示多少列。默认为false |
| is-mirrored | 镜像反转，就是布局是从左到右还是从右到左 |
| auto-size | 布局的容器是否自动自动大小 |
| vertical-compact | 是否开启垂直压缩，设置true或false试试看 |
| prevent-collision | 防止碰撞，设置为ture时，单元格只能拖动到空白处 |
| use-css-transforms | 否使用CSS属性 transition-property: transform |
| breakpoints | 为响应式布局设置断点,默认为 { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }，里面的单位为像素px |
| cols | 设置每个断点对应的列数,默认{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }。 |
| use-style-cursor | 是否使用动态鼠标指针样式，当拖动出现卡顿时，将此值设为 false也许可以缓解布局问题。 |
grid-item属性说明
| 属性名称 | 属性说明 |
|---|---|
| i | 单元格的id,字符串类型 |
| x | 单元格起始列 |
| y | 单元格起始行 |
| w | 单元格占几列 |
| h | 单元格占几行 |
| min-w | 单元格最小宽度占几列，缩放单元格时起作用 |
| min-h | 单元格最小宽度占几行，缩放单元格时起作用 |
| max-w | 单元格最大宽度占几列，缩放单元格时起作用 |
| max-h | 单元格最大宽度占几行，缩放单元格时起作用 |
| is-draggable | 单元格是否允许拖拽，如果为 null 取决父容器 |
| is-resizable | 单元格是否允许缩放，如果为 null 取决父容器 |
| static | 单元格是否是静态的，默认为false,如果是那么无法缩放、拖动、被其他元素影响 |
| drag-ignore-from | css 筛选器，设置那些元素无法触发拖拽事件，比如'a, button' |
| drag-allow-from | css 筛选器，那些元素可以触发拖拽事件，默认为null,全部元素 |
| resize-ignore-from | css 筛选器，那些元素无法触发调整大小事件 |