Vue Grid Layout使用

安装使用

使用 vue3 开发

// 安装
npm install vue-grid-layout@3.0.0-beta1 --save
// 使用
import gridLayout from 'vue-grid-layout'
const app = createApp(App)
app.use(gridLayout)

页面中使用

 <grid-layout
 	ref="grid"
   :layout="layout"
   :col-num="12"
   :row-height="30"
   :is-draggable="true"
   :is-resizable="true"
   :is-mirrored="false"
   :vertical-compact="true"
   :margin="[10, 10]"
   :use-css-transforms="true"
>

    <grid-item 
    	v-for="item in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i">
        {{item.i}}
    </grid-item>
</grid-layout>

x 是 item 横向位置，
y 是 item 纵向位置，
w 是 item 宽度，
h 是 item 高度，
i 是 item 索引，一定不能重复，如果重复了，拖动或调整时会影响 i 相同的 item
key 用来唯一标记 item ，一定不能重复，如果重复了，会出现样式覆盖，比如两个相同的 key，如果一个调整了宽高，当刷新时另一个也会受影响，这是由于vue更新时以 key 为主

ref="grid" 是获取grid组件，用来更新grid的高度
如果item可以动态增减，外层容器的高度就要跟着更新

const grid = ref(null)
// 监听 layout 的长度变化
watch(
	() => layout.length,
	() => {
		grid.value.updateHeight()
	}
)

updateHeight 是 vue-grid-layout 组件中用来更新容器高度的方法

调整 item 的位置后 layout 数组的顺序默认不会调整，可以自己处理，grid-layout 上有个更新事件 layout-updated，在这个事件里重新排序

 <grid-layout
 	...
	@layout-updated="layoutUpdated"
	...
>

    <grid-item 
    	v-for="item in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i">
        {{item.i}}
    </grid-item>
</grid-layout>

const layoutUpdated = (newLayout) => {
	// 按照页面显示顺序排序，y 代表行，x 代表列，先按行排，再按列排
	newLayout.sort(a, b) => (a.y + '' + a.x) - (b.y + '' + b.x))
}

参考：
Vue Grid Layout -️ 适用Vue.js的栅格布局系统（保姆级使用教程）