vue获取组件中元素宽度常用的方法

<template>
  <div ref="myElement">内容</div>
</template>

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

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

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

export default {
  mounted() {
    const width = window.getComputedStyle(this.$refs.myElement).getPropertyValue('--width');
    console.log(width);
    // 然后你可以设置这个变量的值
    this.$refs.myElement.style.setProperty('--width', `${this.$refs.myElement.clientWidth}px`);
  }
};

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

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

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