常见的多行文本展开收起功能 及 getComputedStyle()

在许多项目中有一些详情功能，需要用到‘展开’，‘收起’的功能，内容超出规定的行数后开启展示收起的功能效果。

思路： 首先需要判断文本是否超出规定的行数，这些一般都是异步请求渲染到页面上的，可以使用nextTick来监听DOM中的数据变化。然后设置css

这个方法和思路都是简单的一种

核心代码

 

<template>
       <div class="wrap">
           <div class="content" ref="Resume" :class="{'ellipsis' : textShow}" :style="{'width' : (textShow ? '85%' : '100%')}">
              个人简介：{{data}}
              <span class="zhan" @click="contentShow()" v-if="textShow == false">收起
                <van-icon name="arrow-up" />
              </span>
          </div>
          <span class="zhan" @click="contentShow()" v-if="textShow">展开
              <van-icon name="arrow-down" />
          </span>
       </div>
</template>

<script>
import {Icon } from 'vant'
export default {
  conponents:{ [Icon.name]: Icon},
  data() {
     return {
         data: '这是一段内容这是一段内容这是一段内容这是一段内容',
         textShow: null // 控制展开和收起 
      } 
   },
   methods: {
     // 调用这个函数，需要考虑异步请求，当请求成功后才能这个方法才不会出错，在请求成功后，this.$nextTick(() => {this.getHeight()})
        // 获取个人简介高度
    getHeight() {
      if (this.infoData.PersonalProfile) {
        let contentHeight = window.getComputedStyle(this.$refs.Resume).height.replace('px', '');
       // 20 是通过一行内容，用getComputedStyle获取到的一行的height
        if (contentHeight > 20) { // 当当前的高度大于一行的高度的时候
          this.textShow = true
        }
      }
    },
   }
}
<style lang="less">
 .wrap {
          display: flex;
          align-items: center;
          .content {
               font-size: 14px;
               color: #b9b9b9;
               font-weight: 400;
               word-break: break-all;
          }
          .zhan {
               font-size: 14px;
               color: #ed1616;
               font-weight: 400;
          }
  }
</style>

 

 

 

 

2. getComputedStyle()

  在实际项目中，可能需要获取元素的css样式属性值，但是getComputedStyle()只能获取通过style设置的元素css属性值。

  这时getComputedStyle的方法就得以体现，他可以获取指定元素对应css属性的最终计算值

  

// element 必须值，要获取样式值的元素对象
// pseudoElt：可选，表示指定节点的伪元素
window.getComputedStyle(element, [pseudoElt])