Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 101f3978 by zsh
Options

添加监听缩放事件

parent b5a36e86
Showing with 48 additions and 12 deletions
index.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>徐汇教育局</title> <title>基础Vue框架</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
src/components/echarts/index.vue
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
</template> </template>
<script> <script>
import { mapState } from 'vuex'
export default { export default {
name: 'chartEl', name: 'chartEl',
...@@ -32,6 +34,10 @@ export default { ...@@ -32,6 +34,10 @@ export default {
} }
}, },
computed: {
...mapState(['innerWH'])
},
mounted () { mounted () {
this.initChart() this.initChart()
}, },
...@@ -47,11 +53,19 @@ export default { ...@@ -47,11 +53,19 @@ export default {
} }
}, },
deep: true // 深度监听 deep: true // 深度监听
},
// 监听窗口缩放重置echacrts
innerWH: {
handler () {
console.log('window resize')
this.chartResize()
}
} }
}, },
beforeDestroy () { beforeDestroy () {
window.removeEventListener('resize', this.chartResize) window.removeEventListener('resize')
if (this.chart) { if (this.chart) {
this.chart.dispose() this.chart.dispose()
this.chart = null this.chart = null
...@@ -63,7 +77,7 @@ export default { ...@@ -63,7 +77,7 @@ export default {
* @method initChart 初始化图表 * @method initChart 初始化图表
*/ */
initChart () { initChart () {
const { id = '', option = {} } = this.chartOpt const { id = '', option = {} } = this.chartOpt || {}
if (id && option) { if (id && option) {
const currChartEl = document.getElementById(id) const currChartEl = document.getElementById(id)
...@@ -77,18 +91,15 @@ export default { ...@@ -77,18 +91,15 @@ export default {
// 渲染图表 // 渲染图表
this.chart.setOption(option, true) this.chart.setOption(option, true)
setTimeout(() => { // echarts图表自适应屏幕宽度
window.addEventListener('resize', this.chartResize)
}, 200)
} }
}, },
/** /**
* @method chartResize 重置图表 * @method chartResize 重置图表
*/ */
chartResize: throttle (function () { chartResize () {
this.chart && this.chart.resize() this.chart && this.chart.resize()
}, 2000) }
} }
} }
</script> </script>
src/index.js
...@@ -6,6 +6,7 @@ import createStore from './store' // Vuex ...@@ -6,6 +6,7 @@ import createStore from './store' // Vuex
import createRouter from './router/router' import createRouter from './router/router'
import axiosServer from './request' import axiosServer from './request'
import UsePlugin from './public/plugins' import UsePlugin from './public/plugins'
import utils from 'utils'
// 引入css // 引入css
import '../static/styles/reset.css' import '../static/styles/reset.css'
import './public/utils/refreshSize' import './public/utils/refreshSize'
...@@ -17,6 +18,18 @@ Vue.use(UsePlugin) ...@@ -17,6 +18,18 @@ Vue.use(UsePlugin)
const router = createRouter() // 创建router const router = createRouter() // 创建router
const store = createStore() // 创建Vuex 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({ new Vue({
el: '#app', el: '#app',
router, router,
......
src/public/utils/utils.js
...@@ -321,7 +321,7 @@ export default { ...@@ -321,7 +321,7 @@ export default {
* @param {Int|Number} delay 延迟间隔 * @param {Int|Number} delay 延迟间隔
* @param {Object} ctx 当前函数执行上下文对象 * @param {Object} ctx 当前函数执行上下文对象
*/ */
throttle (fn, delay, ctx) { throttle (fn, delay = 1000, ctx) {
let isAvail = true let isAvail = true
let count = false let count = false
let movement = null let movement = null
......
src/store/actions/index.js
...@@ -2,4 +2,13 @@ ...@@ -2,4 +2,13 @@
* @file actions/index Vuex-actions * @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)
}
}
src/store/mutations/index.js
...@@ -4,5 +4,8 @@ ...@@ -4,5 +4,8 @@
*/ */
export default { export default {
// 设置页面的宽高, 目前用于图表初始化, 不可删除!!!
SET_INNER_WH (state, val) {
state.innerWH = val
}
} }
src/store/state/index.js
...@@ -4,5 +4,5 @@ ...@@ -4,5 +4,5 @@
*/ */
export default { export default {
innerWH: {} // 页面的宽高, 目前用于图表初始化, 不可删除!!!
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment