快捷導(dǎo)航

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

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

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

原生js方法

該方法適用所有vue項(xiàng)目，原生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é)點(diǎn)寬高變小
        (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é)點(diǎn)寬高變大
        (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ā)項(xiàng)目時(shí)的首選，簡(jiǎn)單有效

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

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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