vue使用element-resize-detector監(jiān)聽元素寬度變化方式
更新時間：2022年12月09日 11:07:59 作者：Agwenbi
這篇文章主要介紹了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.dhdzp.com/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)聽器，會出現不能獲取data和methods的情況，具體原因參考JavaScript高級教程
解決方案：
let that = this;
this.$erd.listenTo(document.getElementById("bar"), function (element) {
? ? that.$nextTick(function () {
? ? ? ? //使echarts尺寸重置
? ? ? ? that.myEcharts.resize();
? ? })
})
? ? ? ? ? ? //監(jiān)聽元素變化總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
Vue API中setup ref reactive函數使用教程
setup是用來寫組合式api，內部的數據和方法需要通過return之后，模板才能使用。在之前vue2中，data返回的數據，可以直接進行雙向綁定使用，如果我們把setup中數據類型直接雙向綁定，發(fā)現變量并不能實時響應。接下來就詳細看看它們的使用2022-12-12
這篇文章主要介紹了Vue3中引入Pinia存儲庫使用,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
vue項目有時候需要根據頁面需要動態(tài)的去修改頁面標題名稱，本文就來介紹一下，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
下面小編就為大家分享一篇解決vue頁面刷新或者后退參數丟失的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue+element自定義指令如何實現表格橫向拖拽，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue底部導航欄的詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了搭建vue開發(fā)環(huán)境的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue2項目之swiper.js 的使用,需要的朋友可以參考下2023-12-12
vuejs+element UI點擊編輯表格某一行時獲取內容填入表單的示例
這篇文章主要介紹了vuejs+element UI點擊編輯表格某一行時獲取內容填入表單的示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
swagger是一種標準的數據格式的定義，對于不同語言進行實現一些注解API式的東西，能快速生成這種描述restful格式的api信息的json串，本文給大家詳細介紹vue編寫的功能強大的swagger-ui頁面，感興趣的朋友跟隨小編一起看看吧2022-02-02