vue使用element-resize-detector監(jiān)聽(tīng)元素寬度變化方式
使用element-resize-detector監(jiān)聽(tīng)元素寬度變化
如圖,當(dāng)我們切換左側(cè)菜單展示效果的時(shí)候,右側(cè)內(nèi)容會(huì)對(duì)應(yīng)變寬,但此時(shí)的echarts并不能執(zhí)行自適應(yīng)效果,這是因?yàn)榍袚Q菜單展示效果并沒(méi)有觸發(fā)window.onresize,所以為解決類似此問(wèn)題,我們可使用element-resize-detector
1、引入element-resize-detector,npm install element-resize-detector --save
2、在對(duì)應(yīng)位置上引入即可
let elementResizeDetectorMaker = require("element-resize-detector"); //監(jiān)聽(tīng)元素變化 let erd = elementResizeDetectorMaker(); let that = this; erd.listenTo(document.getElementById("bar"), function (element) { that.$nextTick(function () { //使echarts尺寸重置 that.myEcharts.resize(); }) }) //監(jiān)聽(tīng)元素變化
PS:如果在改變寬度過(guò)程中存在動(dòng)畫(huà)效果,此時(shí)我們可以使用防抖,使在動(dòng)畫(huà)結(jié)束后再resize,這樣做的好處是避免在動(dòng)畫(huà)過(guò)程中不斷進(jìn)行resize,造成界面卡頓,影響性能
節(jié)流與防抖代碼見(jiàn):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)聽(tīng)DOM元素
解決方案
第一步:通過(guò)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表達(dá)式作為監(jiān)聽(tīng)器,會(huì)出現(xiàn)不能獲取data和methods的情況,具體原因參考JavaScript高級(jí)教程
解決方案:
let that = this; this.$erd.listenTo(document.getElementById("bar"), function (element) { ? ? that.$nextTick(function () { ? ? ? ? //使echarts尺寸重置 ? ? ? ? that.myEcharts.resize(); ? ? }) }) ? ? ? ? ? ? //監(jiān)聽(tīng)元素變化
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目運(yùn)行或打包時(shí),頻繁內(nèi)存溢出情況問(wèn)題
這篇文章主要介紹了vue項(xiàng)目運(yùn)行或打包時(shí),頻繁內(nèi)存溢出情況的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue2.0實(shí)現(xiàn)簡(jiǎn)單分頁(yè)及跳轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了Vue2.0實(shí)現(xiàn)簡(jiǎn)單數(shù)據(jù)分頁(yè),及頁(yè)數(shù)的跳轉(zhuǎn)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07vue實(shí)現(xiàn)pdf導(dǎo)出解決生成canvas模糊等問(wèn)題(推薦)
最近公司項(xiàng)目需要,利用vue實(shí)現(xiàn)pdf導(dǎo)出,從而保存到本地打印出來(lái),說(shuō)起來(lái)好像也很容易,具體要怎么實(shí)現(xiàn)呢?下面小編給大家?guī)?lái)了vue實(shí)現(xiàn)pdf導(dǎo)出解決生成canvas模糊等問(wèn)題,需要的朋友參考下吧2018-10-10Vue實(shí)現(xiàn)用戶登錄及token驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)用戶登錄及token驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08vuex通過(guò)getters訪問(wèn)數(shù)據(jù)為undefined問(wèn)題及解決
這篇文章主要介紹了vuex通過(guò)getters訪問(wèn)數(shù)據(jù)為undefined問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue3+ts項(xiàng)目搭建的實(shí)現(xiàn)示例
這篇文章主要介紹了vue3+ts項(xiàng)目搭建的實(shí)現(xiàn)示例,本文目的在于記錄自己項(xiàng)目框架搭建的過(guò)程,通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03vue?+?electron應(yīng)用文件讀寫(xiě)操作
這篇文章主要介紹了vue?+?electron應(yīng)用文件讀寫(xiě)操作,如果要制作的應(yīng)用并不復(fù)雜,完全可以將數(shù)據(jù)存儲(chǔ)在本地文件當(dāng)中,然后應(yīng)用就可以通過(guò)這些文件進(jìn)行數(shù)據(jù)的讀寫(xiě),需要的朋友參考下吧2022-06-06Vue中的基礎(chǔ)過(guò)渡動(dòng)畫(huà)及實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue中的基礎(chǔ)過(guò)渡動(dòng)畫(huà)原理解析,需要的朋友可以參考下2018-12-12vue不操作dom實(shí)現(xiàn)圖片輪播的示例代碼
這篇文章主要介紹了vue不操作dom實(shí)現(xiàn)圖片輪播的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12