vue.js에서 컴포넌트의 폭을 찾는 방법

vue.js에서 컴포넌트의 폭을 찾는 방법

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를 참조해 주세요.

스크립트에 워치 블록을 추가합니다.

대본

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의 경우 화살표를 표시할 수 있습니다.

갱신되었습니다.바이올린 설명

템플릿

<tabs ref="ul">

구성 요소에 참조를 배치하지 않으면 인스턴스에서 알 수 없습니다.

대본

this.$nextTick이 함수는 dom이 업데이트될 때 메서드를 실행합니다.

언급URL : https://stackoverflow.com/questions/43776338/how-to-find-width-on-components-in-vue-js