使用vue-grid-layout组件实现布局

npm install vue-grid-layout@3.0.0-beta1 --save

 main.js 全局挂载

import VueGridLayout from 'vue-grid-layout'

const  app=createApp(App).use(VueGridLayout)

组件中引入

<template>
    <grid-layout :layout.sync="arrMap" :col-num="24" :maxRows="12" :row-height="67" :vertical-compact="true" :use-css-transforms="true" :margin="[2,2]" :is-draggable="false" :is-resizable="false">
        <grid-item v-for="item in arrMap" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" style="overflow: auto">
             <!-- 内容 -->
        </grid-item>
    </grid-layout>
</template>

<script>
import { ref } from 'vue' 
import VueGridLayout from 'vue-grid-layout'
export default {
    components: {
        GridLayout: VueGridLayout.GridLayout,
        GridItem: VueGridLayout.GridItem
    },
    setup(props) {
        const arrMap = ref([
            {w: 4, h: 2, y: 0, x: 0, i: 1},
            {w: 4, h: 2, y: 0, x: 4, i: 2},
            {w: 4, h: 2, y: 0, x: 8, i: 3},
            {w: 4, h: 2, y: 0, x: 12, i: 4},
            {w: 4, h: 2, y: 0, x: 16, i: 5},
            {w: 4, h: 2, y: 0, x: 20, i: 6},
            {w: 8, h: 5, y: 2, x: 0, i: 7},
            {w: 8, h: 5, y: 2, x: 0, i: 7},
            {w: 8, h: 5, y: 2, x: 8, i: 8},
            {w: 8, h: 5, y: 2, x: 16, i: 9},
            {w: 8, h: 5, y: 7, x: 0, i: 10},
            {w: 8, h: 5, y: 7, x: 8, i: 11},
            {w: 8, h: 5, y: 7, x: 16, i: 12}
        ])
        return {
            arrMap 
        }
    }
}
</script>