快捷導(dǎo)航

vue使用element-resize-detector監(jiān)聽元素寬度變化方式

更新時(shí)間：2022年12月09日 11:07:59 作者：Agwenbi

這篇文章主要介紹了vue使用element-resize-detector監(jiān)聽元素寬度變化方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用element-resize-detector監(jiān)聽元素寬度變化

如圖，當(dāng)我們切換左側(cè)菜單展示效果的時(shí)候，右側(cè)內(nèi)容會(huì)對(duì)應(yīng)變寬，但此時(shí)的echarts并不能執(zhí)行自適應(yīng)效果，這是因?yàn)榍袚Q菜單展示效果并沒有觸發(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)聽元素變化
let erd = elementResizeDetectorMaker();
let that = this;
erd.listenTo(document.getElementById("bar"), function (element) {
    that.$nextTick(function () {
        //使echarts尺寸重置
        that.myEcharts.resize();
    })
})
//監(jiān)聽元素變化

PS：如果在改變寬度過(guò)程中存在動(dòng)畫效果，此時(shí)我們可以使用防抖，使在動(dòng)畫結(jié)束后再resize，這樣做的好處是避免在動(dòng)畫過(guò)程中不斷進(jìn)行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元素

解決方案

第一步：通過(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)聽器，會(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)聽元素變化