如何vue.js

Question

的Html找到組件寬度

Vue.component('tabs', { 
    template:'<li :class="tabselected"><a href="#">{{name}}</a></li>', 
    props:['name','tabselected'] 
}); 

我想找到所有華里寬度之和在這個例子。

Answer 1

將手錶塊添加到腳本中。

腳本

watch: { 
    'tabelements': function (val) { 
     var lis = this.$refs.ul.getElementsByTagName("li"); 
     for (var i = 0, len = lis.length; i < len; i++) 
     { 
      console.log(lis[i].clientWidth); // do something 
     } 
     console.log(this.$refs.ul.clientWidth, this.$refs.ul.scrollWidth); 
    } 
    } 

如果scrollWidth> clientWidth，U可以顯示你的箭。

已更新。解釋對組件Fiddle

模板

<tabs ref="ul"> 

認沽裁判否則實例亙古不知道它

腳本

this.$nextTick 此功能的run方法時，DOM更新