快捷導(dǎo)航

Vue實現(xiàn)監(jiān)聽dom節(jié)點寬高變化方式

更新時間：2023年10月21日 10:17:11 作者：風(fēng)灬雲(yún)

這篇文章主要介紹了Vue實現(xiàn)監(jiān)聽dom節(jié)點寬高變化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

原生js方法

該方法適用所有vue項目，原生js開發(fā)的思維

    <div ref="datas">
            <div class="scroll_box" ref="scroll" style="width:20%;height: 20%;overflow:scroll;position: absolute;left: 0;top: 0;background-color: #000;">
                      <div class="scroll_child" style="width:300%;height: 300%;"></div>
            </div>
          <div class="scroll_box2" ref="scroll2" style="width:20%;height: 20%;overflow:scroll;position: absolute;left: 0;top: 0;background-color: #000;">
              <div class="scroll_child" style="width:300px;height: 300px;"></div>
          </div>
    </div>

mounted(){
        // 監(jiān)聽節(jié)點寬高變小
        (this.$refs.scroll as HTMLElement).scrollTop = 1000;
        (this.$refs.scroll as HTMLElement).scrollLeft = 1000;
        (this.$refs.scroll as HTMLElement).addEventListener('scroll', () => {
            this.width = ((this.$refs.datas as Vue).$el as HTMLElement).offsetWidth;
            (this.$refs.scroll2 as HTMLElement).scrollTop = 1000;
            (this.$refs.scroll2 as HTMLElement).scrollLeft = 1000;
        });
        
        // 監(jiān)聽節(jié)點寬高變大
        (this.$refs.scroll2 as HTMLElement).scrollTop = 1000;
        (this.$refs.scroll2 as HTMLElement).scrollLeft = 1000;
        (this.$refs.scroll2 as HTMLElement).addEventListener('scroll', () => {
            this.width = ((this.$refs.datas as Vue).$el as HTMLElement).offsetWidth;
            (this.$refs.scroll as HTMLElement).scrollTop = 1000;
            (this.$refs.scroll as HTMLElement).scrollLeft = 1000;
        })
}

element-ui element-resize-detector插件

vue + element 開發(fā)項目時的首選，簡單有效

<div ref="datas"></div>

mounted(){
        let erd = elementResizeDetectorMaker();
        erd.listenTo((this.$refs.datas as Vue).$el,  (element: HTMLElement) => {
            this.width = element.offsetWidth;
        })
}

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Intellij IDEA搭建vue-cli項目的方法步驟
這篇文章主要介紹了Intellij IDEA搭建vue-cli項目的方法步驟,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
詳解vue之頁面緩存問題(基于2.0)
本篇文章主要介紹了vue之頁面緩存問題(基于2.0)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-01-01
Vue 3 動態(tài) ref 的使用方式以表格為列
我正在開發(fā)的項目中,有一個表格組件,其中一列是分鏡描述,需要支持視頻上傳功能,下面給大家介紹Vue 3動態(tài)ref的使用方式以表格為列給大家詳細(xì)講解,感興趣的朋友一起看看吧
2023-07-07
vue2.0 如何在hash模式下實現(xiàn)微信分享
這篇文章主要介紹了vue2.0 如何在hash模式下實現(xiàn)微信分享,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
Vue是怎么渲染template內(nèi)的標(biāo)簽內(nèi)容的
這篇文章主要介紹了Vue是怎么渲染template內(nèi)的標(biāo)簽內(nèi)容的，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
vue中使用swiper5方式
這篇文章主要介紹了vue中使用swiper5方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
詳解vue-validator（vue驗證器）
本篇文章主要介紹了vue-validator（vue驗證器）,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-01-01
vue3 + vite + ts 中使用less文件全局變量的操作方法
這篇文章主要介紹了vue3 + vite + ts 中使用less文件全局變量的操作方法,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-03-03
vue.js表格組件開發(fā)的實例詳解
Vue.js通過簡潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復(fù)雜的生態(tài)中，Vue.js有幸受到一定程度的關(guān)注，所以本文將從各方面對Vue.js的組件開發(fā)做一個深入介紹。有需要的朋友們可以參考借鑒。
2016-10-10
詳解Webstorm 新建.vue文件支持高亮vue語法和es6語法
這篇文章主要介紹了Webstorm 添加新建.vue文件功能并支持高亮vue語法和es6語法，非常具有實用價值，需要的朋友可以參考下
2017-10-10