feat: improve the fullscreen action

xiaoluoboding · Nov 22, 2019 · 9c0e023 · 9c0e023
1 parent 390b751
commit 9c0e023
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 105 deletions.
diff --git a/README.md b/README.md
@@ -117,6 +117,8 @@ new Vue({
 | fixedHeight | determine whether widget body's height is fixed, only support `smart-widget` | Boolean | `true` or `false` | `false` |
 | shadow | when to show card shadows | String | `always`、`hover`、`never` | `always` |
 | translateY | the length of vertically transform | Number | - | 0 |
+| isActived | determine whether widget is actived | Boolean | `true` or `false` | `false` |
+| activedColor | the length of vertically transform | String | hex color | #0076db |
 
 ## SmartWidget Methods
 
@@ -128,6 +130,18 @@ new Vue({
 | 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)` |
 
+## 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 |
+
 ## SmartWidgetGrid Props
 
 > it's similar with [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout). Care about the attribute `layout`, The value of layout must be an Array of Object items. Each item must have i, x, y, w and h proprties. especially, the i proprties, it's the unique identifier of the widget item, euqal with widget slot.

diff --git a/app/views/WidgetOnly.vue b/app/views/WidgetOnly.vue
@@ -10,7 +10,11 @@
         </smart-widget>
       </el-col>
       <el-col :span="8">
-        <smart-widget title="Default Widget" shadow="hover" :translateY="10">
+        <smart-widget
+          title="Default Widget"
+          shadow="hover"
+          :translate-y="10"
+        >
           <p>
             {{placeholder}}
           </p>
@@ -31,6 +35,8 @@
           fullscreen
           collapse
           refresh
+          is-actived
+          actived-color="#f4a"
           :loading="loading"
           @on-refresh="handleRefresh"
           @on-fullscreen="handleFullscreen">

diff --git a/app/views/WidgetWithGrid.vue b/app/views/WidgetWithGrid.vue
@@ -1,5 +1,9 @@
 <template>
-  <smart-widget-grid :layout="layout" :row-height="48" :margin="[15, 15]" @layout-updated="handleLayoutUpdated">
+  <smart-widget-grid
+    :layout="layout"
+    :row-height="48"
+    :margin="[15, 15]"
+    @layout-updated="handleLayoutUpdated">
     <smart-widget slot="0" simple>
       <div class="layout-center">
         <h3>Simple Widget Without Header</h3>
@@ -64,9 +68,7 @@
           <el-button type="success" size="mini" @click="$router.push('/widget-only')">Index</el-button>
         </div>
       </template>
-      <el-table
-        :data="tableData"
-        style="width: 100%">
+      <el-table style="width: 100%" :data="tableData">
         <el-table-column
           prop="date"
           label="日期"
@@ -85,13 +87,22 @@
     </smart-widget>
     <smart-widget slot="8" title="2017 Hotest Frontend Project"
       fullscreen
-      :loading="loading"
       refresh
+      is-actived
+      :loading="loading"
       @on-refresh="handleRefresh">
-      <ve-bar-chart :data="barData" :height="contentH" slot-scope="{contentH}" />
+      <template v-slot="{contentH}">
+        <ve-bar-chart :data="barData" :height="contentH" />
+      </template>
     </smart-widget>
     <smart-widget slot="9" title="Diffrent Platforms PV" fullscreen collapse>
-      <ve-donut-chart :data="donutData" :settings="donutSetting" :height="contentH" slot-scope="{contentH}" />
+      <template v-slot="{contentH}">
+        <ve-donut-chart
+          :data="donutData"
+          :settings="donutSetting"
+          :height="contentH"
+        />
+      </template>
     </smart-widget>
   </smart-widget-grid>
 </template>
@@ -115,20 +126,6 @@ export default {
       ]
     }
   },
-  methods: {
-    handleRefresh () {
-      this.loading = true
-      setTimeout(() => {
-        this.loading = false
-      }, 2000)
-    },
-    handleLayoutUpdated (newLayout) {
-      console.log(JSON.stringify(newLayout))
-    },
-    handleMove (params) {
-      console.log(params)
-    }
-  },
   created () {
     this.barData = {
       dimensions: {
@@ -191,6 +188,23 @@ export default {
     this.donutSetting = {
       offsetY: '60%'
     }
+  },
+  methods: {
+    handleRefresh () {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 2000)
+    },
+    handleLayoutUpdated (newLayout) {
+      console.log(JSON.stringify(newLayout))
+    },
+    handleMove (params) {
+      console.log(params)
+    },
+    handleResize (params) {
+      console.log(params)
+    }
   }
 }
 </script>