欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年10月21日 10:17:11   作者：風(fēng)灬雲(yún)  
這篇文章主要介紹了Vue實(shí)現(xiàn)監(jiān)聽dom節(jié)點(diǎn)寬高變化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

原生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)目時的首選，簡單有效

<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)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論