cli3改版基本完成

Former-commit-id: 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly fc66dcb2e437ff46b2c36ec1e3bcce71a6461250 [formerly b6451dc60d4c1e6006a9fcd380656d2023436e64]]]]]
Former-commit-id: c791410cda91e2df1b9808bfb032f0d3d68106ef
Former-commit-id: 0c5197800cfae6f27f7ab792c887fb25a73a23e0
Former-commit-id: 208a8e77c0fada6e9d191a7d495615ec2ef9704d [formerly af8c1367ed65b626196ac156c8521257cc804d60]
Former-commit-id: 1fdb571cea6ed9dba9ea02f4ba6ebfb5d89e1b2f
Former-commit-id: 774a145ae0694612edf988d9992ef797ddf4f21d
Former-commit-id: 03fc24d70365836d60360aa24e24dc7cb4520b91
Former-commit-id: bba4fd5552fa42da029fd6b310f5ee48558d5508
Former-commit-id: 2de81d34fb07248965677e8a3866c13089fa95e7

src/views/demo/components/layout/grid.vue

@@ -0,0 +1,108 @@
+<template>
+  <d2-container type="full" class="page">
+    <d2-grid-layout
+      v-bind="layout"
+      @layout-updated="layoutUpdatedHandler">
+      <d2-grid-item
+        v-for="(item, index) in layout.layout"
+        :key="index"
+        v-bind="item"
+        @resize="resizeHandler"
+        @move="moveHandler"
+        @resized="resizedHandler"
+        @moved="movedHandler">
+        <el-card shadow="never">
+          <el-tag size="mini" type="info" slot="header">Card {{item.i}}</el-tag>
+          <template v-if="item.i === '0'">
+            <div class="d2-mb">拖拽卡片调整位置</div>
+            <div class="d2-mb">拖拽卡片右下角的手柄调整卡片大小</div>
+            <div class="d2-mb">在控制台打印出数据变化</div>
+          </template>
+        </el-card>
+      </d2-grid-item>
+    </d2-grid-layout>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      layout: {
+        layout: [
+          {'x': 0, 'y': 0, 'w': 4, 'h': 10, 'i': '0'},
+          {'x': 4, 'y': 0, 'w': 2, 'h': 5, 'i': '1'},
+          {'x': 6, 'y': 0, 'w': 4, 'h': 5, 'i': '2'},
+          {'x': 10, 'y': 0, 'w': 2, 'h': 10, 'i': '3'},
+          {'x': 4, 'y': 5, 'w': 4, 'h': 5, 'i': '4'},
+          {'x': 8, 'y': 5, 'w': 2, 'h': 5, 'i': '5'},
+          {'x': 0, 'y': 10, 'w': 8, 'h': 5, 'i': '6'},
+          {'x': 8, 'y': 10, 'w': 4, 'h': 5, 'i': '7'}
+        ],
+        colNum: 12,
+        rowHeight: 30,
+        isDraggable: true,
+        isResizable: true,
+        isMirrored: false,
+        verticalCompact: true,
+        margin: [10, 10],
+        useCssTransforms: true
+      }
+    }
+  },
+  mounted () {
+    // 加载完成后显示提示
+    this.showInfo()
+  },
+  methods: {
+    // 显示提示
+    showInfo () {
+      this.$notify({
+        title: '提示',
+        message: '你可以按住卡片拖拽改变位置；或者在每个卡片的右下角拖动，调整卡片大小'
+      })
+    },
+    // 测试代码
+    layoutUpdatedHandler (newLayout) {
+      console.group('layoutUpdatedHandler')
+      newLayout.forEach(e => {
+        console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
+      })
+      console.groupEnd()
+    },
+    resizeHandler (i, newH, newW) {
+      this.$log('resizeHandler', `i: ${i}, newH: ${newH}, newW: ${newW}`)
+    },
+    moveHandler (i, newX, newY) {
+      this.$log('moveHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
+    },
+    resizedHandler (i, newH, newW, newHPx, newWPx) {
+      this.$log('resizedHandler', `i: ${i}, newH: ${newH}, newW: ${newW}, newHPx: ${newHPx}, newWPx: ${newWPx}`)
+    },
+    movedHandler (i, newX, newY) {
+      this.$log('movedHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.page {
+  .vue-grid-layout {
+    background-color: $color-bg;
+    border-radius: 4px;
+    margin: -10px;
+    .el-card {
+      height: 100%;
+      @extend %unable-select;
+    }
+    .vue-resizable-handle {
+      opacity: .3;
+      &:hover{
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>