一個類似於Gridster的柵格佈局系統Vue元件

程式設計師老魚發表於2023-10-30
Vue元件

哈嘍,我是老魚，一名致力於在技術道路上的終身學習者、實踐者、分享者！

image

Vue Grid Layout是一個類似於Gridster的柵格佈局系統, 適用於Vue.js，靈感來源於React Grid Layout。

特性

  • 可拖拽

  • 可調整大小

  • 靜態部件（不可拖拽、調整大小）

  • 拖拽和調整大小時進行邊界檢查

  • 增減部件時避免重建柵格

  • 可序列化和還原的佈局

  • 自動化 RTL 支援

  • 響應式

安裝

Npm

npm i vue-grid-layout
Yarn

yarn add vue-grid-layout
瀏覽器

<script src="vue-grid-layout.umd.min.js"></script>

使用

引入

import VueGridLayout from 'vue-grid-layout';
加入到元件中

export default { components: { GridLayout: VueGridLayout.GridLayout, GridItem: VueGridLayout.GridItem }, // ... data, methods, mounted (), etc. }
資料

`var testLayout = [
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
{"x":4,"y":0,"w":2,"h":5,"i":"2"},
{"x":6,"y":0,"w":2,"h":3,"i":"3"},
{"x":8,"y":0,"w":2,"h":3,"i":"4"},
{"x":10,"y":0,"w":2,"h":3,"i":"5"},
{"x":0,"y":5,"w":2,"h":5,"i":"6"},
{"x":2,"y":5,"w":2,"h":5,"i":"7"},
{"x":4,"y":5,"w":2,"h":5,"i":"8"},
{"x":6,"y":3,"w":2,"h":4,"i":"9"},
{"x":8,"y":4,"w":2,"h":4,"i":"10"},
{"x":10,"y":4,"w":2,"h":4,"i":"11"},
{"x":0,"y":10,"w":2,"h":5,"i":"12"},
{"x":2,"y":10,"w":2,"h":5,"i":"13"},
{"x":4,"y":8,"w":2,"h":4,"i":"14"},
{"x":6,"y":8,"w":2,"h":4,"i":"15"},
{"x":8,"y":10,"w":2,"h":5,"i":"16"},
{"x":10,"y":4,"w":2,"h":2,"i":"17"},
{"x":0,"y":9,"w":2,"h":3,"i":"18"},
{"x":2,"y":6,"w":2,"h":2,"i":"19"}
];

new Vue({
    el: '#app',
    data: {
        layout: testLayout,
    },
});`

html

    <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>

Github地址：https://github.com/jbaysolutions/vue-grid-layout
API文件地址：https://jbaysolutions.github.io/vue-grid-layout/

我是老魚，白天敲程式碼，晚上搞自媒體。
課程 | 陪跑 | 專案 | 副業諮詢

相關文章