vue2.0 JS文本溢出显示省略号

Question

小弟最近刚入Vue的坑
准备随手拿一个项目练手，一个企业官网
里面有一个新闻列表
由于是PC站，所以准备采用JS的方法来解决文本溢出隐藏显示省略号
代码如下

Html (在v-for的li中)

<div class="newsText" ref='text'>
  <p>{{ item.newsContent }}</p>
</div>

JS(直接复制的之前JQ项目)

    eliText(div){
      div.forEach(function(val,index){
        console.log(val.style.height)
      })
      // div.each(function(i){
      //     var divH = $(this).height();
      //     var $p = $("p", $(this)).eq(0);
      //     while ($p.outerHeight() > divH) {
      //         $p.text($p.html().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
      //     };
      //   });
    }

放在mounted能获取到this.$refs,里面也有text,但是this.$refs.text却是个undefined一脸问号？？？

mounted(){
    this.$nextTick(function(){
      console.log(this.$refs)
      let text = this.$refs.text;
      console.log(text);
      //this.eliText(text);
    })
  }

点开是这样的

但是放在updated虽然获取到dom，但是我怎么获取元素的高度,打印出来的this.$refs.text.style.height是''

updated(){
    let text = this.$refs.text;
    console.log(text);
    this.eliText(text);
  }

求各位大佬指教Orz

Answer 1

应该是this.$refs.text.offsetHeight吧？ style.height是获取你给他定义的高度的数值

Answer 2

这个锅和vue没有半毛钱关系。。。典型的jQuery中毒太深啊。。。

style拿不到计算的样式

eliText(div){
    div.forEach(function(val,index){
        console.log(document.defaultView.getComputedStyle(val).height);
    })
}

ie低版本有问题，用currentStyle

Answer 3

mounted-> this.$nextTick(function(){

获取$this.refs.text

})

Answer 4