Skip to content

Commit

Permalink
feat: improve the fullscreen action
Browse files Browse the repository at this point in the history
  • Loading branch information
xiaoluoboding committed Nov 22, 2019
1 parent 390b751 commit 9c0e023
Show file tree
Hide file tree
Showing 4 changed files with 136 additions and 105 deletions.
14 changes: 14 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.
Expand Down
8 changes: 7 additions & 1 deletion app/views/WidgetOnly.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -31,6 +35,8 @@
fullscreen
collapse
refresh
is-actived
actived-color="#f4a"
:loading="loading"
@on-refresh="handleRefresh"
@on-fullscreen="handleFullscreen">
Expand Down
56 changes: 35 additions & 21 deletions app/views/WidgetWithGrid.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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="日期"
Expand All @@ -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>
Expand All @@ -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: {
Expand Down Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 9c0e023

Please sign in to comment.