feat: rewrite grid-layout events

xiaoluoboding · Nov 23, 2019 · 24edb1c · 24edb1c
1 parent 523d772
commit 24edb1c
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 110 deletions.
diff --git a/README.md b/README.md
@@ -129,18 +129,14 @@ new Vue({
 | moved | Every time an item is finished being moved and changes position | `(i, newX, newY)` |
 | resize | Every time an item is being resized and changes size | `(i, newH, newW, newHPx, newWPx)` |
 | resized | Every time an item is finished being moved and changes position | `(i, newH, newW, newHPx, newWPx)` |
+| container-resized | Every time the grid item/layout container changes size (browser window or other) | `(i, newH, newW, newHPx, newWPx)` |
 
 ## CSS Selector in SmartWidget
 
 | Name | Description |
 |:--------:|--------|
 | `.smartwidget` | The main selector in SmartWidget |
-| `.is-always-shadow` | Every time an item is being moved and changes position |
-| `.is-hover-shadow` | Every time an item is being moved and changes position |
-| `.is-never-shadow` | Every time an item is being moved and changes position |
-| `.is-actived` | Every time an item is being moved and changes position |
-| `.smartwidget-fullscreen` | Every time an item is being moved and changes position |
-| `.smartwidget-collapsed` | Every time an item is being moved and changes position |
+| `.is-actived` | The state of widget is actived |
 
 ## SmartWidgetGrid Props
 
@@ -167,6 +163,10 @@ new Vue({
 
 | Name | Description | Parameters |
 |:--------|:--------|:--------:|
+| layout-created | Emited on the component created lifecycle hook | `newLayout` |
+| layout-before-mount | Emited on the component beforeMount lifecycle hook | `newLayout` |
+| layout-mounted | Emited on the component mounted lifecycle hook | `newLayout` |
+| layout-ready | Emited when all the operations on the mount hook finish | `newLayout` |
 | layout-updated | Every time the layout has finished updating and positions of all grid-items are recalculated | `newLayout` |
 
 ## License

diff --git a/app/views/WidgetWithGrid.vue b/app/views/WidgetWithGrid.vue
@@ -3,7 +3,9 @@
     :layout="layout"
     :row-height="48"
     :margin="[15, 15]"
-    @layout-updated="handleLayoutUpdated">
+    @layout-updated="onLayoutUpdated"
+    @move="onMove"
+    @container-resized="onContainerResized">
     <smart-widget slot="0" simple>
       <div class="layout-center">
         <h3>Simple Widget Without Header</h3>
@@ -156,35 +158,37 @@ export default {
         data: [40000, 27800, 22000, 20200, 13600]
       }]
     }
-    this.tableData = [{
-      date: '2016-05-03',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }, {
-      date: '2016-05-02',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }, {
-      date: '2016-05-04',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }, {
-      date: '2016-05-01',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }, {
-      date: '2016-05-08',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }, {
-      date: '2016-05-06',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }, {
-      date: '2016-05-07',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }]
+    this.tableData = [
+      {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-08',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-06',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-07',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }
+    ]
     this.donutSetting = {
       offsetY: '60%'
     }
@@ -196,13 +200,16 @@ export default {
         this.loading = false
       }, 2000)
     },
-    handleLayoutUpdated (newLayout) {
+    onLayoutUpdated (newLayout) {
       console.log(JSON.stringify(newLayout))
     },
-    handleMove (params) {
+    onMove (params) {
+      console.log(params)
+    },
+    onResize (params) {
       console.log(params)
     },
-    handleResize (params) {
+    onContainerResized (params) {
       console.log(params)
     }
   }