update version to 2.3.1

CHANGELOG.md

@@ -1,3 +1,12 @@
+# 2.3.1-alpha (2019-07-04)
+
+### Perfect
+
+- **charts:** Enhanced style compatibility.
+- **scrollBoard:** Enhanced style compatibility.
+- **fullScreenContainer:** Fix potential rendering exceptions.
+- **mixin:** Strengthen `autoResize` stability.
+
 # 2.3.0-alpha (2019-07-04)
 
 ### Directory Structure Change

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiaminghi/data-view",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "author": "JiaMing <743192023@qq.com>",
   "description": "Vue Large screen data display component library",
   "main": "/lib/index.js",

src/components/charts/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-charts-container" :ref="ref">
-    <div class="charts" :ref="chartRef" />
+    <div class="charts-canvas-container" :ref="chartRef" />
   </div>
 </template>
 
@@ -30,6 +30,8 @@ export default {
     option () {
       let { chart, option } = this
 
+      if (!chart) return
+
       if (!option) option = {}
 
       chart.setOption(option)
@@ -67,7 +69,7 @@ export default {
   width: 100%;
   height: 100%;
 
-  .charts {
+  .charts-canvas-container {
     width: 100%;
     height: 100%;
   }

src/components/fullScreenContainer/src/main.vue

@@ -1,57 +1,57 @@
 <template>
-  <div id="dv-full-screen-container" ref="full-screen-container">
+  <div id="dv-full-screen-container" :ref="ref">
+    <template v-if="ready">
       <slot></slot>
+    </template>
   </div>
 </template>
 
 <script>
+import autoResize from '../../../mixin/autoResize.js'
+
 export default {
   name: 'DvFullScreenContainer',
+  mixins: [autoResize],
   data () {
     return {
+      ref: 'full-screen-container',
+      allWidth: 0,
       scale: 0,
-      datavRoot: ''
+      datavRoot: '',
+      ready: false
     }
   },
   methods: {
-    init () {
+    afterAutoResizeMixinInit () {
-      const { initConfig, setAppScale, bindReSizeEventHandler } = this
+      const { initConfig, setAppScale } = this
 
       initConfig()
 
       setAppScale()
 
-      bindReSizeEventHandler()
+      this.ready = true
     },
     initConfig () {
+      const { dom } = this
       const { width, height } = screen
 
       this.allWidth = width
 
-      const datavRoot = this.datavRoot = this.$refs['full-screen-container']
+      dom.style.width = `${width}px`
-
+      dom.style.height = `${height}px`
-      datavRoot.style.width = `${width}px`
-      datavRoot.style.height = `${height}px`
     },
     setAppScale () {
-      const { allWidth, datavRoot } = this
+      const { allWidth, dom } = this
 
       const currentWidth = document.body.clientWidth
 
-      datavRoot.style.transform = `scale(${currentWidth / allWidth})`
+      dom.style.transform = `scale(${currentWidth / allWidth})`
     },
-    bindReSizeEventHandler () {
+    onResize () {
-      const { debounce, setAppScale } = this
+      const { setAppScale } = this
 
-      if (!debounce) return
+      setAppScale()
-
-      window.addEventListener('resize', debounce(100, setAppScale))
     }
-  },
-  mounted () {
-    const { init } = this
-
-    init()
   }
 }
 </script>

src/components/scrollBoard/src/main.vue

@@ -1,12 +1,11 @@
 <template>
   <div class="dv-scroll-board" :ref="ref">
-    <div class="header" v-if="header.length && mergedConfig">
+    <div class="header" v-if="header.length && mergedConfig" :style="`background-color: ${mergedConfig.headerBGC};`">
       <div
         class="header-item"
         v-for="(headerItem, i) in header"
         :key="headerItem + i"
         :style="`
-          background-color: ${mergedConfig.headerBGC};
           height: ${mergedConfig.headerHeight}px;
           line-height: ${mergedConfig.headerHeight}px;
           width: ${widths[i]}px;
@@ -19,7 +18,7 @@
     <div
       v-if="mergedConfig"
       class="rows"
-      :style="`height: calc(100% - ${header.length ? mergedConfig.headerHeight : 0}px);`"
+      :style="`height: ${height - (header.length ? mergedConfig.headerHeight : 0)}px;`"
     >
       <div
         class="row-item"
@@ -357,20 +356,20 @@ export default {
 </script>
 
 <style lang="less">
-.text {
-  padding: 0 10px;
-  box-sizing: border-box;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .dv-scroll-board {
   position: relative;
   width: 100%;
   height: 100%;
   color: #fff;
 
+  .text {
+    padding: 0 10px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }  
+
   .header {
     display: flex;
     flex-direction: row;

src/mixin/autoResize.js

@@ -17,7 +17,7 @@ export default {
     async autoResizeMixinInit () {
       const { initWH, getDebounceInitWHFun, bindDomResizeCallback, afterAutoResizeMixinInit } = this
 
-      await initWH()
+      await initWH(false)
 
       getDebounceInitWHFun()
 
@@ -25,7 +25,7 @@ export default {
 
       if (typeof afterAutoResizeMixinInit === 'function') afterAutoResizeMixinInit()
     },
-    initWH () {
+    initWH (resize = true) {
       const { $nextTick, $refs, ref, onResize } = this
 
       return new Promise(resolve => {
@@ -35,7 +35,7 @@ export default {
           this.width = dom.clientWidth
           this.height = dom.clientHeight
 
-          if (typeof onResize === 'function') onResize()
+          if (typeof onResize === 'function' && resize) onResize()
 
           resolve()
         })