vue使用element-resize-detector監(jiān)聽元素寬度變化方式
使用element-resize-detector監(jiān)聽元素寬度變化
如圖,當我們切換左側菜單展示效果的時候,右側內容會對應變寬,但此時的echarts并不能執(zhí)行自適應效果,這是因為切換菜單展示效果并沒有觸發(fā)window.onresize,所以為解決類似此問題,我們可使用element-resize-detector
1、引入element-resize-detector,npm install element-resize-detector --save
2、在對應位置上引入即可
let elementResizeDetectorMaker = require("element-resize-detector"); //監(jiān)聽元素變化 let erd = elementResizeDetectorMaker(); let that = this; erd.listenTo(document.getElementById("bar"), function (element) { that.$nextTick(function () { //使echarts尺寸重置 that.myEcharts.resize(); }) }) //監(jiān)聽元素變化
PS:如果在改變寬度過程中存在動畫效果,此時我們可以使用防抖,使在動畫結束后再resize,這樣做的好處是避免在動畫過程中不斷進行resize,造成界面卡頓,影響性能
節(jié)流與防抖代碼見:http://www.dbjr.com.cn/article/269597.htm
<template> <div class="page"> <div id="bar" class="echarts"></div> </div> </template> <script> let elementResizeDetectorMaker = require("element-resize-detector"); import {debounce} from 'utils.js'; export default { name:'page', mounted(){ let erd = elementResizeDetectorMaker(); let that = this; erd.listenTo(document.getElementById("bar"), debounce(this.resizeFunc)) }, methods:{ resizeFunc(element){ console.log(element);//element元素信息 that.$nextTick(function () { //使echarts尺寸重置 that.myEcharts.resize(); }) } } } </script> <style lang="scss" scoped> .page{ width:100%; height:100%; .echarts{ width:100%; height:100%; } } </style>
全局element-resize-detector監(jiān)聽DOM元素
解決方案
第一步:通過npm install element-resize-detector獲取elementResizeDetectorMaker
npm install element-resize-detector
第二步:將依賴引入import elementResizeDetectorMaker from ‘element-resize-detector’
import ElementResizeDetectorMaker from "element-resize-detector" Vue.prototype.$erd = ElementResizeDetectorMaker()
第三步:使用
? ? ? ? ? this.$erd.listenTo(document.getElementById("chinaMapChart"), (element)=>{ ? ? ? ? ? ? this.resize() ? ? ? ? ? })
如果不使用Lambda表達式作為監(jiān)聽器,會出現(xiàn)不能獲取data和methods的情況,具體原因參考JavaScript高級教程
解決方案:
let that = this; this.$erd.listenTo(document.getElementById("bar"), function (element) { ? ? that.$nextTick(function () { ? ? ? ? //使echarts尺寸重置 ? ? ? ? that.myEcharts.resize(); ? ? }) }) ? ? ? ? ? ? //監(jiān)聽元素變化
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue實現(xiàn)pdf導出解決生成canvas模糊等問題(推薦)
最近公司項目需要,利用vue實現(xiàn)pdf導出,從而保存到本地打印出來,說起來好像也很容易,具體要怎么實現(xiàn)呢?下面小編給大家?guī)砹藇ue實現(xiàn)pdf導出解決生成canvas模糊等問題,需要的朋友參考下吧2018-10-10vuex通過getters訪問數(shù)據(jù)為undefined問題及解決
這篇文章主要介紹了vuex通過getters訪問數(shù)據(jù)為undefined問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08