VUE流动布局，手动调整位置

简介及使用教程

Vue Grid Layout是一个类似于Gridster的栅格布局系统, 适用于Vue.js，灵感来源于React Grid Layout。

特性

• 可拖拽
• 可调整大小
• 静态部件（不可拖拽、调整大小）
• 拖拽和调整大小时进行边界检查
• 增减部件时避免重建栅格
• 可序列化和还原的布局
• 自动化 RTL 支持
• 响应式

安装

Npm

npm i vue-grid-layout

Yarn

yarn add vue-grid-layout

使用

引入

import VueGridLayout from 'vue-grid-layout';

加入到组件中

  export default {
       components: {
           GridLayout: VueGridLayout.GridLayout,
           GridItem: VueGridLayout.GridItem
       },
   }

data() {
    return {
      layout: [
        { x: 0, y: 0, w: 3, h: 10, i: "0", id: "aaa" },
        { x: 3, y: 0, w: 3, h: 10, i: "1", id: "bbb" },
        { x: 6, y: 0, w: 3, h: 10, i: "2", id: "ccc" },
        { x: 9, y: 0, w: 3, h: 10, i: "3", id: "ddd" },
        { x: 0, y: 0, w: 3, h: 10, i: "4", id: "eee" },
        { x: 3, y: 0, w: 3, h: 10, i: "5", id: "fff" },
        { x: 6, y: 0, w: 3, h: 10, i: "6", id: "ggg" },
      ],
      draggable: true,
      resizable: true,
      responsive: true,
      index: 0,
    };
  },

html

<template>
  <div style="width: 100%; height: 100%">
    <input v-model="draggable" type="checkbox" />
    可拖动
    <input v-model="resizable" type="checkbox" />
    可调整大小
    <input v-model="responsive" type="checkbox" />
    镜像
    <br />
    <div style="width: 100%; margin-top: 10px; height: 100%">
      <grid-layout
        :col-num="12"
        :is-draggable="draggable"
        :is-resizable="resizable"
        :layout="layout"
        :responsive="responsive"
        :row-height="30"
        :use-css-transforms="true"
        :vertical-compact="true"
      >
        <grid-item
          style="width: 400px; height: 400px"
          v-for="(item, indexVar) in layout"
          :key="indexVar"
          :h="item.h"
          :i="item.i"
          :w="item.w"
          :x="item.x"
          :y="item.y"
          :id="item.id"
        >
        </grid-item>
      </grid-layout>
    </div>
  </div>
</template>

 js

  mounted() {
    this.$nextTick(() => {
      this.init();
      this.initT();
      this.initW();
      this.initT();
      this.initF();
      this.initV();
      this.initS();
      this.initD();
    });
  },
methods: {
    
    init(){
         //echarts代码
    },
    initT(){
         //echarts代码
    }

  }

css

<style scoped>
.vue-grid-layout {
  background: #eee;
}

.vue-grid-item:not(.vue-grid-placeholder) {
  background: #ccc;
  border: 1px solid black;
}

.vue-grid-item .resizing {
  opacity: 0.9;
}

.vue-grid-item .static {
  background: #cce;
}

.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}

.vue-grid-item .minMax {
  font-size: 12px;
}

.vue-grid-item .add {
  cursor: pointer;
}
</style>