快捷導(dǎo)航

vue中實(shí)時(shí)監(jiān)聽(tīng)div元素盒子的寬高方法

更新時(shí)間：2023年09月20日 08:53:25 作者：王.彥.凱

這篇文章主要給大家介紹了關(guān)于vue中如何實(shí)時(shí)監(jiān)聽(tīng)div元素盒子的寬高的相關(guān)資料,在Vue中你可以使用Vue的計(jì)算屬性和偵聽(tīng)器來(lái)動(dòng)態(tài)監(jiān)測(cè)元素的高度,文中給出了簡(jiǎn)單代碼示例,需要的朋友可以參考下

在Vue中實(shí)時(shí)監(jiān)聽(tīng)div盒子的寬高可以使用resize事件結(jié)合refs來(lái)實(shí)現(xiàn)。

首先，在div盒子上添加一個(gè)ref屬性，例如：

<div ref="box"></div>

然后，在Vue組件的mounted生命周期鉤子中添加事件監(jiān)聽(tīng)：

mounted() {
  window.addEventListener('resize', this.handleResize)
},

在Vue組件的methods中定義handleResize方法來(lái)處理寬高變化：

methods: {
  handleResize() {
    const width = this.$refs.box.offsetWidth;
    const height = this.$refs.box.offsetHeight;
    // 在這里處理寬高變化的邏輯
    console.log('盒子寬度:', width, '盒子高度:', height);
  }
},

這樣，每當(dāng)窗口大小改變時(shí)，handleResize方法將被調(diào)用并獲取到最新的寬高值。你可以在該方法中處理寬高變化的邏輯，例如更新數(shù)據(jù)、觸發(fā)其他操作等。

記得在Vue組件銷毀時(shí)，移除事件監(jiān)聽(tīng)：

beforeDestroy() {
  window.removeEventListener('resize', this.handleResize)
},

這樣就能實(shí)時(shí)監(jiān)聽(tīng)div盒子的寬高了。

補(bǔ)充：vue如何實(shí)現(xiàn)實(shí)時(shí)監(jiān)聽(tīng)頁(yè)面寬度高度變化

運(yùn)用的主要技術(shù)：watch監(jiān)聽(tīng)

話不多說(shuō)直接上代碼，自行研究

 <template>
  <div class="rightContainer">
    <h1>監(jiān)聽(tīng)頁(yè)面寬高</h1>
    <h2>當(dāng)前整個(gè)頁(yè)面寬度{{ windowWidth }}px</h2>
    <h2>當(dāng)前整個(gè)頁(yè)面高度{{ windowHeight }}px</h2>
  </div>
</template>
<script>
export default {
  name: 'WatchsHW',
  data() {
    return {
      windowHeight: document.body.clientHeight,
      windowWidth: document.body.clientWidth
    }
  },
  watch: {
    // 監(jiān)聽(tīng)頁(yè)面高度
    windowHeight(val) {
      console.log('實(shí)時(shí)屏幕高度：', val, this.windowHeight)
    },
    // 監(jiān)聽(tīng)頁(yè)面寬度
    windowWidth(val) {
      console.log('實(shí)時(shí)屏幕寬度：', val, this.windowHeight)
    }
  },
  mounted() {
    // <!--把window.onresize事件掛在到mounted函數(shù)上-->
    window.onresize = () => {
      return (() => {
        this.windowHeight = document.documentElement.clientHeight // 高
        this.windowWidth = document.documentElement.clientWidth // 寬
      })()
    }
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.rightContainer{
  width: 100%;
  text-align: center;
  overflow: hidden;
}
</style>

總結(jié)

到此這篇關(guān)于vue中實(shí)時(shí)監(jiān)聽(tīng)div元素盒子寬高的文章就介紹到這了,更多相關(guān)vue實(shí)時(shí)監(jiān)聽(tīng)div寬高內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: