1、前言

vue-grid-layout是一個適用于vue的拖拽柵格布局庫，功能齊全，適用于拖拽+高度/寬度自由調(diào)節(jié)的布局需求。本文將講述一些常用參數(shù)和事件，以及做一個同步拖拽的Demo。效果動態(tài)圖如下：

grid-layout.gif

2、安裝

• vue2版本：

npm install vue-grid-layout --save

• vue3版本：

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

3、屬性

• GridLayout 容器：

• GridItem 子項：

4、事件

• GridLayout 容器：

• GridItem 子項：

5、占位符樣式修改

直接覆蓋默認的class樣式

.vue-grid-item.vue-grid-placeholder {
    background: red;
    opacity: 0.2;
    transition-duration: 100ms;
    z-index: 2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.vue-grid-item.vue-grid-placeholder {
    background: green !important;
}

6、案例

注：本案例是按照vue3的寫法

• HTML：

<div class="grid_box">
    <div class="left">
        <grid-layout
            v-model:layout="layoutLeft"
            :col-num="4"
            :row-height="50"
            :is-draggable="true"
            :is-resizable="true"
            :is-mirrored="false"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
            ref="gridLeftRef"
        >
            <grid-item
                v-for="item in layoutLeft"
                :x="item.x"
                :y="item.y"
                :w="item.w"
                :h="item.h"
                :i="item.i"
                :key="item.i"
                @resized="handleGridSync"
                @moved="handleGridSync"
            >
                <div class="left_layout_item">
                    <div class="del_btn" @click="deleteGrid(item.i)">刪</div>
                    <span>{{ item.i }}</span>
                </div>
            </grid-item>
        </grid-layout>
    </div>
    <div class="right">
        <grid-layout
            v-model:layout="layoutRight"
            :col-num="4"
            :row-height="10"
            :is-draggable="true"
            :is-resizable="true"
            :is-mirrored="false"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
            ref="gridRightRef"
        >
            <grid-item v-for="item in layoutRight" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
                <div class="right_layout_item">{{ item.i }}</div>
            </grid-item>
        </grid-layout>
    </div>
</div>

• 引入組件

import VueGridLayout from 'vue-grid-layout'

• 數(shù)據(jù)源：

const gridLeftRef = ref<any>()
const gridRightRef = ref<any>()

const layoutLeft = ref([
    { i: '1', x: 0, y: 0, w: 2, h: 2 },
    { i: '2', x: 2, y: 0, w: 2, h: 2 },
    { i: '3', x: 0, y: 0, w: 2, h: 2 },
    { i: '4', x: 2, y: 0, w: 2, h: 2 }
])

const layoutRight = ref([
    { i: '1', x: 0, y: 0, w: 2, h: 2 },
    { i: '2', x: 2, y: 0, w: 2, h: 2 },
    { i: '3', x: 0, y: 0, w: 2, h: 2 },
    { i: '4', x: 2, y: 0, w: 2, h: 2 }
])

• 處理方法：

// 處理Grid同步
const handleGridSync = () => {
    layoutLeft.value.forEach((item1) => {
        layoutRight.value.forEach((item2) => {
            if (item1.i === item2.i) {
                item2.x = item1.x
                item2.y = item1.y
                item2.w = item1.w
                item2.h = 2
            }
        })
    })
    gridLeftRef.value.layoutUpdate()
    gridLeftRef.value.updateHeight()
    gridRightRef.value.layoutUpdate()
    gridRightRef.value.updateHeight()
}

// 創(chuàng)造Grid
const createGrid = () => {
    let maxH = 0
    layoutLeft.value.forEach((item) => {
        if (item.y > maxH) maxH = item.y
    })
    const uid = createUuid()
    layoutLeft.value.push({ i: uid, x: 0, y: maxH, w: 2, h: 2 })
    layoutRight.value.push({ i: uid, x: 0, y: maxH, w: 2, h: 2 })
    handleGridSync()
}

// 刪除Grid
const deleteGrid = (id: string) => {
    const idx1 = layoutLeft.value.findIndex((item1) => item1.i === id)
    layoutLeft.value.splice(idx1, 1)
    const idx2 = layoutRight.value.findIndex((item2) => item2.i === id)
    layoutRight.value.splice(idx2, 1)
    handleGridSync()
}

本次分享就到這兒啦，我是@鵬多多，如果您看了覺得有幫助，歡迎評論，關(guān)注，點贊，轉(zhuǎn)發(fā)，我們下次見~

PS：在本頁按F12，在console中輸入document.querySelectorAll('._2VdqdF')[0].click()，有驚喜哦

往期文章

• 超詳細的Cookie增刪改查
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue3教程
• 超詳細！Vuex手把手教程
• 使用nvm管理node.js版本以及更換npm淘寶鏡像源
• 超詳細！Vue-Router手把手教程
• vue中利用.env文件存儲全局環(huán)境變量，以及配置vue啟動和打包命令
• 微信小程序?qū)崿F(xiàn)搜索關(guān)鍵詞高亮

個人主頁

• CSDN
• GitHub
• 簡書
• 博客園
• 掘金