Vue 动态渲染的内容 文字数量超过5行显示省略号 隐藏溢出部分 添加展开按钮

最近做了个类似微信朋友圈的页面。每条内容是动态渲染出来的。

html参考

      <v-touch @swiperight="swipeRight">
            <scroller :on-infinite="infinite"  :on-refresh = "refresh"  :style="{'top': '1.85rem','background':'#ffffff'}" ref="my_scroller">
              <div class="pyq" v-for="(item,j) in materialList" :key="j">
                  <div class="left">
                      <img :src=item.imgPath>
                  </div>
                  <div class="right">
                      <div class="title">{{item.petName}}</div>
                      <div class="info"  :ref="'FTcontent'+j" :class="{'hideInfo':item.hideInfo}">{{item.materialContent}}</div>
                      <div class="btn" v-if=item.over5line  @click="onToggle(item,j)">{{item.toggleInfo}}</div>
                      <div class="images" :class="{'fourPic':item.fourPic}" >
                          <div class="imgitem"  v-for="(image,index) in item.pictureFiles" :key="index" @click="clickImage(item.pictureFiles,index)"  v-lazy:background-image=image.filePath>
                          </div>
                      </div>
                      <!--  <div class="information" style="width:70%;display: inline-block">长按图片保存</div>-->
                      <van-button
                          v-if="materialList"
                          round
                          plain
                          type="warning"
                          :id="'copy'+j"
                          class="copy_btn"
                          @click="copyAndDowl(item.pictureFiles,j)"
                      >一键复制</van-button>
                  </div>
              </div>
          </scroller>
          </v-touch>

上拉刷新和下拉加载更多使用vue-scroller做的非常方便。默认进入页面首页会自动调用下拉加载更多事件三次，获取前三张页面数据。注意在vant-tab 插件在点击的时候，切换页面，会自动调用一次下拉加载来获取数据。所以不用在tab的点击事件中手动请求数据。

文字文字数量超过5行显示省略号，隐藏溢出部分.这个样式Css：

overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

参考：www.jianshu.com/p/9d76d4a75…

展开和收起按钮，使用变量控制css类的添加和移除，注意要为列表每一项添加控制变量

      //收放内容
        onToggle(item,i){
            if(item.toggleInfo=='全文'){
            Vue.set(item,'toggleInfo','收起')
            Vue.set(item,'hideInfo',false)
            this.$forceUpdate()
            // console.log('移除类hideInfo')
            
        }else{
            Vue.set(item,'toggleInfo','全文')
            Vue.set(item,'hideInfo',true)
            this.$forceUpdate()
            // console.log('添加类hideInfo')
        }

最麻烦的是按钮的显示和隐藏。因为不超过五行内容则直接展示全文，不显示按钮。 只能通过dom获取内容高度，判断是否超过五行。这里我给列表每一项添加控制变量over5line， 通过watch观察每一个dom的高度。（开始我在mounted中处理获取不到dom） 参考：blog.csdn.net/zhuyuchen32…

watch: {
        materialList: {
            handler:function (newVal){
                let me = this;
                me.$nextTick(() => {
                    me.materialList.forEach((item, index) => {
                        var vheight = me.$refs[`FTcontent${index}`][0].offsetHeight;//获取当前的高度
                        var standerlines = 1.5 * parseFloat (getComputedStyle(window.document.documentElement)['font-size'])
                        if (vheight < standerlines) {
                            item.over5line = false;
                        }else{
                            item.over5line = true;
                            if(item.toggleInfo=="全文"){
                                item.hideInfo=true
                            }
                        }
                    });
                })
            },
            deep: true,
            immediate: false
        }
    }