弹性盒子

components/page/wall/index.vue

+<template>
+    <div class="henq-wall">
+        <div class="henq-brick" v-width="5%">
+
+        </div>
+    </div>
+</template>
+<script>
+export default {
+
+    props:{
+        column:{
+            type:Number,
+            default:20
+        },
+        brickHeight:{
+            type:Number,
+            default:25
+        }
+    }
+}
+</script>
+<style lang="less">
+.henq-wall{
+    border: 2px solid #ddd;;
+    .henq-brick{
+        border: 1px solid #ddd;
+        display: table-cell;
+    }
+}
+</style>
\ No newline at end of file

layouts/basic.vue

@@ -10,9 +10,9 @@
                             <Icon type="ios-keypad"></Icon>
                             树形
                         </MenuItem>
-                        <MenuItem name="3">
+                        <MenuItem name="3" to="/go/wall">
                             <Icon type="ios-analytics"></Icon>
-                            Item 3
+                            墙
                         </MenuItem>
                         <MenuItem name="4">
                             <Icon type="ios-paper"></Icon>
@@ -51,7 +51,7 @@
         height: 100%;
         padding: 20px;
         .hp100{
-            height: 100%;
+            min-height: 90%;
         }
     }
 }

pages/go/wall/index.vue

+<template>
+  <div id="wall-test">
+    <Split v-model="split">
+      <div slot="left" class="henq-wall">
+        <div
+          class="henq-brick"
+          v-for="(li,i) in list"
+          :key="i"
+          v-width="width(li)"
+          v-height="li.rows*40"
+        >
+          <!-- <div class="filed">{{li.name}}</div> -->
+          <div class="pkg">
+            <div class="title">{{li.name}}</div>
+            <div class="content">{{li.span}}|{{li.rows}}|{{li.value}}</div>
+          </div>
+        </div>
+        <div class="clear"></div>
+      </div>
+      <div slot="right" class="tools">
+        <Table :columns="cols" :data="items" size="small" height="800">
+          <!-- <Input slot="value" slot-scope="{row,i}" v-model="row.value" /> -->
+          <InputNumber
+            slot="span"
+            slot-scope="{row,index}"
+            v-model="row.span"
+            @on-change="setRow(row,index)"
+          />
+          <InputNumber
+            slot="rows"
+            slot-scope="{row,index}"
+            v-model="row.rows"
+            @on-change="setRow(row,index)"
+          />
+        </Table>
+      </div>
+    </Split>
+    <div class="clear"></div>
+  </div>
+</template>
+<script>
+export default {
+  layout: "basic",
+  data() {
+    return {
+      items: [],
+      cols: [
+        { key: "id", title: "id", width: 50 },
+        { key: "name", title: "名称" },
+        // {key:"value",title:"值",slot:"value"},
+        { key: "span", title: "宽", slot: "span" },
+        { key: "rows", title: "高", slot: "rows" }
+      ],
+      // list:[],
+      split: 0.8
+    };
+  },
+  created() {
+    let items = [];
+    for (let i = 0; i < 20; i++) {
+      items.push({
+        id: i,
+        name: "hahah" + i,
+        value: i + "大家爱，才是真爱。。。",
+        span: 5,
+        rows: 1,
+        hide: false
+      });
+    }
+    this.items = items;
+    this.list = items;
+  },
+  methods: {
+    width(row) {
+      return 4.8 * row.span + "%";
+    },
+    setRow(row, i) {
+      let item = this.items[i];
+      item.rows = row.rows;
+      item.span = row.span;
+      this.$set(this.items, i, item);
+    }
+  },
+  computed: {
+    list() {
+      return this.items.filter(u => {
+        return !u.hide;
+      });
+    }
+  },
+  props: {
+    column: {
+      type: Number,
+      default: 20
+    },
+    brickHeight: {
+      type: Number,
+      default: 25
+    }
+  }
+};
+</script>
+<style lang="less">
+@border-color: #ddd;
+#wall-test {
+  .henq-wall {
+    width: 100%;
+    border: 2px solid @border-color;
+    display: flex;
+    .henq-brick {
+      border: 1px solid @border-color;
+      // border-bottom: 1px solid @border-color;
+      display: block;
+      line-height: 30px;
+      justify-content:flex-start;
+      align-items:flex-start;
+      float: left;
+      flex-grow: 0;
+      margin: 2px;
+      // align-self: flex-start;
+      // margin-top: -1px;
+      // margin-left: -1px;
+      .pkg {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        .title {
+          width: 100px;
+          background: #f7f7f7;
+          text-align: right;
+          padding: 0 5px;
+        }
+        .content {
+          flex: 1;
+        }
+      }
+    }
+    .clear {
+      clear: both;
+    }
+  }
+  .tools {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file