Vue-Grid-Layout 是一个使用 Vue.js 实现的网格布局系统。您可以根据自己的需求配置其行列和单元格大小,并通过拖放方式来更改单元格的位置。本文将从多个方面对 Vue-Grid-Layout 进行详细的阐述,包括安装和使用、文档和坑点、拖拽预览、自定义高度、断点和构建。
一、VueGridLayout 坑
使用 Vue-Grid-Layout 过程中有一些坑点需要注意。下面是一些容易踩到的坑点和解决方案。
1. 当配置 layout 时,需要保证 grid-item 和 grid-layout 组件由不同的父组件进行包裹
<template>
<div>
<VueGridLayout :layout="layout">
<div v-for="item in layout">
<div>{{ item.i }}</div>
</div>
</VueGridLayout>
</div>
</template>
2. 如果需要移除选中的元素,则需要使用 `vueGridLayout.$refs['your-grid-ref'].removeItem(item)` 方法
const { $refs } = this.$refs.vueGridLayout;
$refs.grid.remove(item);
3. 当在内部使用 vue-form-generator 时,请借助 slot-scope 将数据传递下去
<vue-grid-layout>
<template v-for="item in items" :slot="item.name" scoped-slot="scope">
<div v-if="item.component">
<component :is="item.component" v-model="form[item.model]" :readonly="disabled" />
</div>
</template>
</vue-grid-layout>
二、VueGridLayout 官网
官网提供了完整的开发文档、API文档和示例代码,为使用 Vue-Grid-Layout 提供了很好的参考。同时,Vue-Grid-Layou 官方还提供了多语言支持,方便全球开发者使用。
三、VueGridLayout 文档
文档提供了多种场景使用的示例,建议通过文档去了解如何去使用各种 API,同时文档重要性不言而喻,它能帮助开发者更加全面深入地了解 Vue-Grid-Layout。
四、VueGridLayout 拖拽预览
Vue-Grid-Layout 支持拖拽预览功能。通过取消 grid-item 的指定布局而使用 `transform: `来预览将要拖放的元素的位置和大小。我们需要将通过拖拽获取的 layout 数据和 refresh 做处理,以达到正确的效果。
<template>
<div :class="[dataMode2 ? 'mode2' : '', dataMode2 ? 'mode' : '']">
<vue-grid-layout :layout="layout.grid" :col-num="layout.col" :row-height="layout.rowHeight" :is-draggable="true" :is-resizable="true" :use-css-transforms="false" ref="grid">
<template v-for="(item, i) in layout.grid" :slot="item.i" :key="item.i" slot-scope="{ isDraggable, isResizable }">
<div :class="{ active: item.i === active }" :style="{ backgroundColor: item.bgColor }">
<span class="text">{{ item.i }}</span>
</div>
<div class="item-move-ghost" v-if="isDraggable">
<div :class="{ active: item.i === active }" :style="{ backgroundColor: item.bgColor, transform: `translate(${transformBasicStyleValue(item.x)}px, ${transformBasicStyleValue(item.y)}px)` }">
{{ item.i }}