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

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

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

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

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

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

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

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

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

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

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

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

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

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

補充：vue如何實現(xiàn)實時監(jiān)聽頁面寬度高度變化

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

話不多說直接上代碼，自行研究

 <template>
  <div class="rightContainer">
    <h1>監(jiān)聽頁面寬高</h1>
    <h2>當前整個頁面寬度{{ windowWidth }}px</h2>
    <h2>當前整個頁面高度{{ windowHeight }}px</h2>
  </div>
</template>
<script>
export default {
  name: 'WatchsHW',
  data() {
    return {
      windowHeight: document.body.clientHeight,
      windowWidth: document.body.clientWidth
    }
  },
  watch: {
    // 監(jiān)聽頁面高度
    windowHeight(val) {
      console.log('實時屏幕高度：', val, this.windowHeight)
    },
    // 監(jiān)聽頁面寬度
    windowWidth(val) {
      console.log('實時屏幕寬度：', 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é)

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

您可能感興趣的文章: