element-resize-detector監(jiān)聽(tīng)普通元素的實(shí)現(xiàn)示例
說(shuō)明：在進(jìn)行后臺(tái)系統(tǒng)開(kāi)發(fā)時(shí)，經(jīng)常會(huì)用到一些圖表展示，當(dāng)改變?yōu)g覽大小后，這些圖表本身是沒(méi)有響應(yīng)式的，可以借助第三方插件element-resize-detector來(lái)監(jiān)聽(tīng)窗口的變化
一、element-resize-detector 安裝
當(dāng)涉及到網(wǎng)頁(yè)元素的實(shí)時(shí)尺寸變化監(jiān)測(cè)時(shí)，element-resize-detector 是一個(gè)值得推薦的開(kāi)源庫(kù)。它能以驚人的速度實(shí)現(xiàn)跨瀏覽器的元素大小調(diào)整監(jiān)聽(tīng)，比傳統(tǒng)方法快了約37倍。讓我們深入了解這個(gè)神器。
npm install element-resize-detector
element-resize-detector 使用了兩種不同的監(jiān)聽(tīng)策略：
- 對(duì)象方式：修改元素CSS屬性使其觸發(fā)布局更新，從而捕獲尺寸變化。
- 滾動(dòng)方式（默認(rèn)）：通過(guò)在元素內(nèi)部創(chuàng)建滾動(dòng)區(qū)域并監(jiān)聽(tīng)滾動(dòng)事件，達(dá)到無(wú)閃爍、高性能的監(jiān)控效果。
該庫(kù)在處理性能和兼容性方面做了大量工作，包括：
- 對(duì)于靜態(tài)定位（position: static）的元素，會(huì)自動(dòng)轉(zhuǎn)換為相對(duì)定位。
- 添加隱藏元素作為內(nèi)部監(jiān)聽(tīng)器，以確保在所有瀏覽器中的穩(wěn)定運(yùn)行。
二、插件使用
1.插件引入
import elementResizeDetectorMaker from "element-resize-detector";
2.創(chuàng)建實(shí)例對(duì)象
let erd = elementResizeDetectorMaker();
//如果有快速滾動(dòng),如果沒(méi)有不需要進(jìn)行如下配置
let erdUltraFast = elementResizeDetectorMaker({
strategy: "scroll"
});
3.監(jiān)聽(tīng)元素
erd.listenTo(
document.getElementById("endlistenEartagEchart"), //第一個(gè)參數(shù)是要監(jiān)聽(tīng)的dom
function (element) {
setTimeout(() => {
// that.chartBoxW =
// document.getElementById("endlistenEartagEchart").offsetWidth - 30;
// that.setEchart();
}, 0);
} //第二個(gè)參數(shù)回調(diào) 執(zhí)行dom變化執(zhí)行的方法
);到此這篇關(guān)于element-resize-detector監(jiān)聽(tīng)普通元素的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)element-resize-detector監(jiān)聽(tīng)普通元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue如何重置data、組件中的data為什么是一個(gè)函數(shù)、為什么new Vue里的data可以是一個(gè)對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Element的穿梭框數(shù)據(jù)量大時(shí)點(diǎn)擊全選卡頓的解決方案
本文主要介紹了Element的穿梭框數(shù)據(jù)量大時(shí)點(diǎn)擊全選卡頓的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue-cli history模式實(shí)現(xiàn)tomcat部署報(bào)404的解決方式
這篇文章主要介紹了vue-cli history模式實(shí)現(xiàn)tomcat部署報(bào)404的解決方式,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了基于Vue實(shí)現(xiàn)微信小程序的圖文編輯器,由于微信小程序不能使用常規(guī)的圖文編輯器(比如百度的UEditor )編輯新聞內(nèi)容之類(lèi)的，所以用vue寫(xiě)了個(gè)針對(duì)小程序用的圖文編輯器需要的朋友可以參考下2018-07-07
Vue實(shí)現(xiàn)簡(jiǎn)易計(jì)算器
這篇文章主要為大家詳細(xì)介紹了用Vue制作的簡(jiǎn)易計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
Element Notification通知的實(shí)現(xiàn)示例
這篇文章主要介紹了Element Notification通知的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue2如何使用simple-keyboard軟鍵盤(pán)有中文(拼音)
這篇文章主要介紹了vue2如何使用simple-keyboard軟鍵盤(pán)有中文(拼音),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
Vue動(dòng)態(tài)數(shù)據(jù)實(shí)現(xiàn)?el-select?多級(jí)聯(lián)動(dòng)、數(shù)據(jù)回顯方式
這篇文章主要介紹了Vue動(dòng)態(tài)數(shù)據(jù)實(shí)現(xiàn)?el-select?多級(jí)聯(lián)動(dòng)、數(shù)據(jù)回顯方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
懶加載就是延時(shí)加載,即當(dāng)需要用到的時(shí)候再去加載,本文主要介紹了Vue圖片懶加載之Vue-Lazyload的使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-05-05
基于vue循環(huán)列表時(shí)點(diǎn)擊跳轉(zhuǎn)頁(yè)面的方法
今天小編就為大家分享一篇基于vue循環(huán)列表時(shí)點(diǎn)擊跳轉(zhuǎn)頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08