安装使用
使用 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))
}