vue.js - 如何在 vue.js 中查找组件的宽度

Question

HTML:

<ul class="nav nav-tabs nav-style">
  <tabs
    v-for="tabelement in tabelements" :name="tabelement":tabselected="tabelement == type ?  'active': ''" v-on:click="tabclick(tab)"
  ></tabs>
</ul>

JS:

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

我想在这个例子中找到所有 li 的宽度总和。

Answer 1

将 watch block 添加到您的脚本中。

脚本

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，你可以显示你的箭头。

已更新。说明Fiddle

模板

<tabs ref="ul">

将 ref 放在组件上，否则实例不知道它

脚本

this.$nextTick 此函数在dom更新时运行方法