添加监听缩放事件

101f3978 · zsh · b5a36e86 · 101f3978 · 101f3978 · 101f3978
Commit 101f3978 authored Jul 13, 2021 by zsh
7 changed files
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>徐汇教育局</title>
+    <title>基础Vue框架</title>
 </head>
 <body>
    <div id="app"></div>

--- a/src/components/echarts/index.vue
+++ b/src/components/echarts/index.vue
@@ -7,6 +7,8 @@
 </template>

 <script>
+import { mapState } from 'vuex'
+
 export default {
    name: 'chartEl',

@@ -32,6 +34,10 @@ export default {
        }
    },

+    computed: {
+        ...mapState(['innerWH'])
+    },
+
    mounted () {
        this.initChart()
    },
@@ -47,11 +53,19 @@ export default {
                }
            },
            deep: true // 深度监听
+        },
+
+        // 监听窗口缩放重置echacrts
+        innerWH: {
+            handler () {
+                console.log('window resize')
+                this.chartResize()
+            }
        }
    },

    beforeDestroy () {
-        window.removeEventListener('resize', this.chartResize)
+        window.removeEventListener('resize')
        if (this.chart) {
            this.chart.dispose()
            this.chart = null
@@ -63,7 +77,7 @@ export default {
         * @method initChart 初始化图表
         */
        initChart () {
-            const { id = '', option = {} } = this.chartOpt
+            const { id = '', option = {} } = this.chartOpt || {}
            if (id && option) {
                const currChartEl = document.getElementById(id)

@@ -77,18 +91,15 @@ export default {

                // 渲染图表
                this.chart.setOption(option, true)
-                setTimeout(() => { // echarts图表自适应屏幕宽度
-                    window.addEventListener('resize', this.chartResize)
-                }, 200)
            }
        },

        /**
         * @method chartResize 重置图表
         */
-        chartResize: throttle (function () {
+        chartResize () {
            this.chart && this.chart.resize()
-        }, 2000)
+        }
    }
 }
 </script>
--- a/src/index.js
+++ b/src/index.js
@@ -6,6 +6,7 @@ import createStore from './store' // Vuex
 import createRouter from './router/router'
 import axiosServer from './request'
 import UsePlugin from './public/plugins'
+import utils from 'utils'
 // 引入css
 import '../static/styles/reset.css'
 import './public/utils/refreshSize'
@@ -17,6 +18,18 @@ Vue.use(UsePlugin)
 const router = createRouter() // 创建router
 const store = createStore() // 创建Vuex

+// 监听窗口缩放事件
+const winResizeFn = utils.throttle(function () {
+    const innerWH = {
+        innerWidth: window.innerWidth,
+        innerHeight: window.innerHeight
+    }
+
+    store.dispatch('setInnerWH', innerWH)
+})
+
+window.addEventListener('resize', winResizeFn)
+
 new Vue({
    el: '#app',
    router,

--- a/src/public/utils/utils.js
+++ b/src/public/utils/utils.js
@@ -321,7 +321,7 @@ export default {
     * @param {Int|Number} delay 延迟间隔
     * @param {Object} ctx 当前函数执行上下文对象
     */
-    throttle (fn, delay, ctx) {
+    throttle (fn, delay = 1000, ctx) {
        let isAvail = true
        let count = false
        let movement = null

--- a/src/store/actions/index.js
+++ b/src/store/actions/index.js
@@ -2,4 +2,13 @@
 * @file actions/index Vuex-actions
 */

-export default {}
+export default {
+    /**
+     * @method setInnerWH 设置页面的宽高, 目前用于图表初始化, 不可删除!!!
+     * @param {Object} param0 提交mutations
+     * @param {Object|Any} payload 待设置成state的值
+     */
+    setInnerWH ({ commit }, payload) {
+        commit('SET_INNER_WH', payload)
+    }
+}
--- a/src/store/mutations/index.js
+++ b/src/store/mutations/index.js
@@ -4,5 +4,8 @@
 */

 export default {
-
+    // 设置页面的宽高, 目前用于图表初始化, 不可删除!!!
+    SET_INNER_WH (state, val) {
+        state.innerWH = val
+    }
 }
--- a/src/store/state/index.js
+++ b/src/store/state/index.js
@@ -4,5 +4,5 @@
 */

 export default {
-
+    innerWH: {} // 页面的宽高, 目前用于图表初始化, 不可删除!!!
 }