vue计算动态元素宽度

问题描述

需求要一个列表，列表中所有元素不能换行，每一个元素包括一个table。

分析问题

可以使用一个ul然后让li浮动，这样的结果是当li过长会换行，为了不让li换行可以动态计算所有长度之和作为ul的长度

问题解决

<div class="father">  
    <ul class="clearfix" ref="ulRef" :style="{ width: ulWidth }">
       <template v-for="un in uList">
          <un-li :key="un.id"></un-li>
       </template>
    </ul>
</div>

initWidth() {
      this.$nextTick(() => {
        let len = this.$refs.ulRef.children.length
        let allWidth = len
        while(--len > -1) {
          let liWidth = this.$refs.ulRef.children[len].offsetWidth
          allWidth += liWidth
        }
        this.ulWidth = allWidth + 'px'
      })
}

备注

vue获取元素高度/宽度的方法

// target element
<div ref="dRef"></div> 

• 获取高度值 （内容高 + padding + 边框）

let height= this.$refs.dRef.offsetHeight // 100
let width= this.$refs.dRef.offsetWidth// 100

• 获取元素样式值 （存在单位）

let height = window.getComputedStyle(this.$refs.dRef).height; // 100px
let width= window.getComputedStyle(this.$refs.dRef).width; // 100px

• 获取元素内联样式值（非内联样式无法获取）

let height = this.$refs.dRef.style.height; // 100px
let width= this.$refs.dRef.style.width; // 100px