grid.vue

<template>
  <div class="kanban-grid">
    <el-input type="textarea" v-model="kanbanDataStr" :row="10"> </el-input>
    <el-button type="success" @click="handleReloadGrid"> 重新加载 </el-button>
    <div class="grid grid0" muuri-group="0">
      <div
        class="item"
        v-for="(item, i) in kanbanData"
        :swapindex="item.index"
        :swapsort="item.sort"
        :swapuid="item.uid"
        :swaptype="item.type"
        :key="i"
        :style="item.style"
      >
        <div class="item-content">grid1--{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>
<style></style>

<script>
/* eslint-disable no-unused-vars */
require(`./style.scss`);
import muuriMethod from "@/utils/muuri-util";
export default {
  //商城主页面
  name: "kanban-grid",
  componentsUsed: {
    name: "kanban-grid",
  },
  routerUsed: {
    path: "/kanban/grid",
    name: "kanban-grid",
    meta: {
      keepAlive: true,
      name: "kanban-grid",
    },
    component: (r) =>
      require.ensure([], () => r(require("./grid")), "kanban-bs"),
  },
  data() {
    return {
      kanbanDataStr: "",
      //#region ===========网格变量 start
      kanbanData: [], // 从数据库获取
      muuriGrid: [], // muuri html 对象
      muuriSwap: [], // muuri html 和 vue 数据过度对象
      muuriSaveData: [], // 入库的数据
      //#endregion ===========网格变量 end
    };
  },
  props: {},
  created() {},
  mounted() {
    let that = this;
    that.handleGetGrid();
  },
  computed: {},
  methods: {
    handleReloadGrid() {
      let that = this;
      that.kanbanData = JSON.parse(that.kanbanDataStr);
      that.$nextTick(() => {
        that.handleLoadData();
      });
    },
    handleConvertGrid() {
      //
    },
    handleGetSwaps() {
      muuriMethod.swaps(this);
    },
    handleLoadData() {
      let that = this;
      if (that.muuriGrid) {
        that.muuriGrid.forEach((temp) => {
          temp.destroy();
        });
        that.muuriGrid = [];
      }
      // eslint-disable-next-line no-undef
      loadjs.ready("muuri", () => {
        let options = muuriMethod.options(that);
        // eslint-disable-next-line no-undef
        options.dragSort = getAllGrids;
        // // eslint-disable-next-line no-undef
        // Muuri.defaultOptions.showDuration = 400;
        // // eslint-disable-next-line no-undef
        // Muuri.defaultOptions.dragSortPredicate.action = "swap";
        // eslint-disable-next-line no-undef
        that.muuriGrid.push(new Muuri(".kanban-grid .grid0", options));

        muuriMethod.data = that.kanbanData;
        muuriMethod.events(that);

        function getAllGrids(item) {
          return that.muuriGrid;
        }
        that.muuriGrid.forEach((grid) => {
          grid.refreshItems();
        });
      });
    },
    handleGetGrid() {
      let that = this;
      let dataT = [];
      let indexT = 0;
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17].forEach(
        (temp, i) => {
          dataT.push({
            name: temp,
            sort: temp,
            type: "0",
            index: indexT,
            uid: `guid-0-uid-${temp}`,
            style: {
              // width: `${5 * temp}%`,
              // height: `${30 * temp}px`,
            },
          });
          indexT = indexT + 1;
        }
      );

      that.kanbanData = dataT;
      // this.muuriGrid.refreshItems();
      // this.muuriGrid.refreshSortData();

      that.$nextTick(() => {
        that.handleLoadData();
      });
      that.kanbanDataStr = JSON.stringify(that.kanbanData);
    },
  },
  watch: {},
  components: {},
};
</script>

[{"name":1,"sort":1,"type":"0","index":0,"uid":"guid-0-uid-1","style":{}},{"name":2,"sort":2,"type":"0","index":1,"uid":"guid-0-uid-2","style":{"width":"500px","height":"500px"}},{"name":3,"sort":3,"type":"0","index":2,"uid":"guid-0-uid-3","style":{"width":"200px","height":"400px","background":"green"}},{"name":4,"sort":4,"type":"0","index":3,"uid":"guid-0-uid-4","style":{"width":"300px","height":"200px","background":"red"}},{"name":5,"sort":5,"type":"0","index":4,"uid":"guid-0-uid-5","style":{}},{"name":6,"sort":6,"type":"0","index":5,"uid":"guid-0-uid-6","style":{}},{"name":7,"sort":7,"type":"0","index":6,"uid":"guid-0-uid-7","style":{}},{"name":8,"sort":8,"type":"0","index":7,"uid":"guid-0-uid-8","style":{}},{"name":9,"sort":9,"type":"0","index":8,"uid":"guid-0-uid-9","style":{}},{"name":10,"sort":10,"type":"0","index":9,"uid":"guid-0-uid-10","style":{}},{"name":11,"sort":11,"type":"0","index":10,"uid":"guid-0-uid-11","style":{}},{"name":12,"sort":12,"type":"0","index":11,"uid":"guid-0-uid-12","style":{}},{"name":13,"sort":13,"type":"0","index":12,"uid":"guid-0-uid-13","style":{}},{"name":14,"sort":14,"type":"0","index":13,"uid":"guid-0-uid-14","style":{}},{"name":15,"sort":15,"type":"0","index":14,"uid":"guid-0-uid-15","style":{}},{"name":16,"sort":16,"type":"0","index":15,"uid":"guid-0-uid-16","style":{}},{"name":17,"sort":17,"type":"0","index":16,"uid":"guid-0-uid-17","style":{}}]