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