vue中实现文字超过2行... 展开-收起(兼容ie)

先看看实际效果2.需求一步一步分析当文字超出省略号就想到css样式实现（ie不兼容）overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;...

彻夜不归

7348人浏览 · 2019-08-16 17:00:31

彻夜不归 · 2019-08-16 17:00:31 发布

先看看实际效果

2.需求一步一步分析
当文字超出省略号就想到css样式实现（ie不兼容）

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

3.由于自己也是一个懒人、就想在网上找找、看了几篇文章都是根据width、height来计算的看了一下写的比较复杂、都只是针对单个文本来的、现实中一般都是列表展示数据的
代码如下：复制代码即可运行、兼容ie

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 中文字超过2行显示省略号 展开-收起</title>
  <style>
    .content {
      display: flex;
      margin-bottom: 30px;
    }

    .text {
      position: relative;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 2px;
      color: #666666;
    }

    .retract {
      position: relative;
      overflow: hidden;
    }

    .retract:after {
      content: '...';
      position: absolute;
      bottom: 0;
      right: 2px;
      width: 25px;
      padding-left: 30px;
      background: linear-gradient(to right, transparent, #fff 45%);
    }

    .btn {
      position: absolute;
      right: 0;
      bottom: -30px;
      font-size: 14px;
      line-height: 19px;
      letter-spacing: 2px;
      color: #FFAD41;
      cursor: pointer;
    }

    .more {
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 2px;
      color: #666666;
      visibility: hidden;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="view">
      <div class="text more" ref="more">
        占位
      </div>
      <div class="content" v-for="(item, index) in curData" :key="index">
        <div class="text">
          <div :class="{'retract': item.status}" :style="{'max-height':item.status ? textHeight: ''}" ref="textContainer">
            {{item.desc}}
          </div>
          <div class="btn">
            <p v-if="item.status" @click="item.status = false">展开</p>
            <p v-if="item.status == false" @click="item.status = true">收起</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        curData: [
          { desc: '人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。' },
          { desc: '小说刻画人物的方法：心理描写、动作描写、语言描写、外貌描写、神态描写，同时，小说是一种写作方法。' },
          { desc: '与其他文学样式相比，小说的容量较大，它可以细致地展现人物性格和人物命运，可以表现错综复杂的矛盾冲突，同时还可以描述人物所处的社会生活环境。优势是可以提供整体的、广阔的社会生活。' },
          { desc: '纯文学中的小说体裁讲究纯粹性。“谎言去尽之谓纯。”(出自墨人钢《就是》创刊题词)便是所谓的“纯”。也就是说，小说在构思及写作的过程中能去尽政治谎言、道德谎言、商业谎言、维护阶级权贵谎言、愚民谎言等谎言，使呈现出来的小说成品具备纯粹的艺术性。小说的纯粹性是阅读者最重要的审美期待之一。随着时代的发展，不光是小说，整个文学的纯粹性逾来逾成为整个世界对文学审美的一个重要核心。' }
        ],
        textHeight: null
      }
    },
    mounted() {
      this.curData.forEach((ele, index) => {
        this.$set(this.curData, index, Object.assign({}, ele, { status: null }))
      })
      // DOM 加载完执行
      this.$nextTick(() => {
        this.calculateText()
      })

      window.onresize = () => {
        this.curData.forEach((ele, index) => {
          this.$set(this.curData, index, Object.assign({}, ele, { status: null }))
        })
        setTimeout(() => {
          this.calculateText()
        }, 0)
      }
    },
    methods: {
      // 计算文字 显示展开 收起
      calculateText() {
        // 获取一行文字的height 计算当前文字比较列表文字
        let oneHeight = this.$refs.more.scrollHeight
        let twoHeight = oneHeight * 2 || 40
        this.textHeight = `${twoHeight}px`
        let txtDom = this.$refs.textContainer
        for (let i = 0; i < txtDom.length; i++) {
          let curHeight = txtDom[i].offsetHeight
          if (curHeight > twoHeight) {
            this.$set(this.curData, i, Object.assign({}, this.curData[i], { status: true }))
          } else {
            this.$set(this.curData, i, Object.assign({}, this.curData[i], { status: null }))
          }
        }
      }
    }
  })
</script>

分析代码
- 省略号通过:after伪类实现
- 文字一行高度、在浏览器中展示都有所区别、所以在这里我在页面放置了一段占位文本设置了隐藏占位
- 通过获取占位文本的高度 * 2 计算出2行文本内容动态改变status状态 null-无展开收起 true-展开 false-收起结合max-height实现
- 注意⚠️ 解析完数据由于dom没加载完 ref获取不到需要在 **this. $n e x t T i c k * * 中获取 r e f 值此时 d o m 加载完或者使用 s e t T i m e o u t (f n, 0) 延时解决 t h i s .$ set用法自行了解

5.完结（不明白可以提问交流、谢谢）

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^