快捷導(dǎo)航

vue獲取組件中元素寬度常用的方法

更新時(shí)間：2024年08月20日 09:18:52 作者：qq_42463588

在Web開(kāi)發(fā)中,獲取DOM元素的寬度、高度以及滾動(dòng)位移是常見(jiàn)的需求,這篇文章主要給大家介紹了關(guān)于vue獲取組件中元素寬度常用的方法,需要的朋友可以參考下

方法 1: 使用 ref 和 clientWidth

你可以給需要獲取寬度的元素添加一個(gè) ref 屬性，然后在組件的方法中通過(guò) this.$refs 訪問(wèn)它，并使用 clientWidth 屬性獲取寬度。

<template>
  <div ref="myElement">內(nèi)容</div>
</template>

<script>
export default {
  mounted() {
    const width = this.$refs.myElement.clientWidth;
    console.log(width);
  }
};
</script>

方法 2: 使用 getBoundingClientRect

getBoundingClientRect 方法返回元素的大小及其相對(duì)于視口的位置。

export default {
  mounted() {
    const rect = this.$refs.myElement.getBoundingClientRect();
    const width = rect.width;
    console.log(width);
  }
};

方法 3: 使用 CSS 變量

你可以在 CSS 中定義一個(gè)變量來(lái)存儲(chǔ)寬度，然后在 Vue 中通過(guò) JavaScript 動(dòng)態(tài)設(shè)置這個(gè)變量的值。

<style scoped>
.my-element {
  --width: 0px;
}
</style>

export default {
  mounted() {
    const width = window.getComputedStyle(this.$refs.myElement).getPropertyValue('--width');
    console.log(width);
    // 然后你可以設(shè)置這個(gè)變量的值
    this.$refs.myElement.style.setProperty('--width', `${this.$refs.myElement.clientWidth}px`);
  }
};

方法 4: 使用 $nextTick

如果你需要在 DOM 更新后獲取元素的寬度，可以使用 $nextTick 方法。

export default {
  mounted() {
    this.$nextTick(() => {
      const width = this.$refs.myElement.clientWidth;
      console.log(width);
    });
  }
};

方法 5: 使用計(jì)算屬性

如果元素的寬度依賴于響應(yīng)式數(shù)據(jù)，你可以使用計(jì)算屬性來(lái)獲取寬度。

export default {
  data() {
    return {
      someData: ''
    };
  },
  computed: {
    elementWidth() {
      return this.$refs.myElement.clientWidth;
    }
  }
};

請(qǐng)注意，計(jì)算屬性中不能執(zhí)行 DOM 操作，所以你可能需要在 watch 或 methods 中使用這個(gè)值。

注意事項(xiàng)

確保在 DOM 元素渲染完成后再訪問(wèn)它們，這通常在 mounted 鉤子中完成。
clientWidth 返回元素的寬度（包括內(nèi)邊距和邊框），如果你只需要內(nèi)容區(qū)域的寬度，可能需要減去內(nèi)邊距和邊框的寬度。
使用 $nextTick 可以確保在 Vue 的 DOM 更新周期之后執(zhí)行代碼。

通過(guò)這些方法，你可以在 Vue 組件中獲取元素的寬度，以實(shí)現(xiàn)所需的功能和樣式效果。

附：vue 如何判斷元素內(nèi)容是否超過(guò)寬度的方式

有時(shí)候我們需要vue 判斷元素內(nèi)容是否超過(guò)寬度，廢話不多說(shuō)直接上代碼

        let isOverflow = this.$refs.isOverflow;
        for (let i in isOverflow) {
          let cWidth = isOverflow[i].clientWidth;
          let sWidth = isOverflow[i].scrollWidth;
          if (sWidth > cWidth) { //超過(guò)
            this.$set(this.isEllipsis, i, true);
          } else {
            this.$set(this.isEllipsis, i, false);
          }
        }