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

问题描述

问 题

小弟最近刚入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

解决方案

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

这篇关于vue.js - vue2.0 JS文本溢出显示省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！