vue 文本超过2行展示更多：列表做法、单个文本做法

待我称王封你为后i 2022-11-22 12:41 513阅读 0赞

因项目需要 做成单个文本超出2行展示更多的效果。列表做法在网上参考的，单个做法是我修改后的。

**个人理解实现大概的思路**：多写一个占位的 class=‘text’，占位的样式要和我们的内容文本一样。计算出占位文本一行的高度，然后把我们内容 (内容文本的高度 / 一行文本的高度) ，要是这个比例大于2 说明超出2行了，这个时候给内容文本赋值占位文本高度 twoHeight 两倍，同时要给内容文本超出隐藏，在内容文本最后面加伪元素 ‘…’ ，‘展开’ 要展示，点击 ‘展开’ 的时候所有文字展示， ‘展开’ 变成’收起’。(单个div：点击 ‘下箭头’ 直接 隐藏’下箭头’)  
复制代码到vue文件里面可直接使用

## 列表里面 每项超出2行显示更多 ##

#### vant、less、vue-cli3.0 ####

<template>
      <div>
        <div class="group">
          <div class="text more" ref="more">占位</div>
          <div class="list" v-for="(item, index) in historyList" :key="index">
            <van-row>
              <van-col span="12">{ {  item.version }}</van-col>
              <van-col class="t_right l_text" span="12">{ {  item.time }}</van-col>
            </van-row>
            <div class="l_title">{ {  item.title }}</div>
            <div
              class="text"
              ref="textContainer"
              :class="{ retract: item.status }"
              :style="{ 'max-height': item.status ? textHeight : '' }"
            >
              { {  item.content }}
            </div>
            <span v-if="item.status !== null" class="link" @click="more(index)">{ { 
              item.status ? "展开" : "收起"
            }}</span>
          </div>
        </div>
      </div>
    </template>
    <script>
    import {  Col, Row } from "vant";
    export default { 
      data() { 
        return { 
          textHeight: "",
          content:"-1听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度，推荐;-听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度，推荐",
          historyList: [
            { 
              version: "7.1.4",
              title: "本次更新",
              content:
                "-2听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度，推荐;-听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度，推荐",
              time: "2周前",
            },
          ],
        };
      },
      components: { 
        [Row.name]: Row,
        [Col.name]: Col,
      },
      mounted() { 
        this.historyList.forEach((ele, index) => { 
          this.$set( this.historyList, index, Object.assign({ }, ele, {  status: null }) );
        });
        // DOM 加载完执行
        this.$nextTick(() => { 
          this.calculateText();
          //console.log(this.historyList)
        });
    
        window.onresize = () => { 
          this.historyList.forEach((ele, index) => { 
            this.$set(
              this.historyList,
              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.historyList,
                i,
                Object.assign({ }, this.historyList[i], {  status: true })
              );
            } else { 
              this.$set(
                this.historyList,
                i,
                Object.assign({ }, this.historyList[i], {  status: null })
              );
            }
          }
        },
        more(index) { 
          this.historyList[index].status = !this.historyList[index].status;
        },
      },
    };
    </script>
    <style lang="less" scoped>
    .group { 
      .list { 
        padding: 5px 0;
        border-bottom: 1px solid #eaeaea;
      }
      .text { 
        position: relative;
        color: #000;
        font-size: 14px;
      }
      .more { 
        visibility: hidden;
      }
      .link { 
        font-size: 12px;
        color: #2d95fe;
      }
      .retract { 
        position: relative;
        overflow: hidden;
      }
    
      .retract:after { 
        content: "...";
        position: absolute;
        bottom: 0;
        right: 2px;
        width: 25px;
        padding-left: 25px;
        background: linear-gradient(to right, transparent, #fff 45%);
      }
    }
    </style>

--------------------

## 单个div 里面超出2行显示更多 ##

#### less、vue-cli3.0 ####

<template>
      <div>
        <div class="group">
          <div class="text2 more2" ref="more2">占位不可删除</div>
          <div class="list2">
            <div
              class="text2"
              ref="textContainer2"
              :class="{ retract2: testObj }"
              :style="{ 'max-height': testObj ? textHeight2 : '' }"
            >
              { {  name }}
            </div>
            <span v-if="testObj" class="link2" @click="moreBtn()"></span>
          </div>
        </div>
      </div>
    </template>
    <script>
    import {  Col, Row } from "vant";
    export default { 
      data() { 
        return { 
          textHeight2: "",
          testObj: false,
          name: "1啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊1啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",
        };
      },
      components: { 
        [Row.name]: Row,
        [Col.name]: Col,
      },
      mounted() { 
        let that = this;
        this.testObj = false; // this.$set(this.testObj, "status2", ""); //1
    
        this.$nextTick(() => { 
          that.calculateTextNew(); // DOM 加载完执行
        });
    
        window.onresize = () => { 
          that.testObj = false; // this.$set(this.testObj, "status2", ""); //1
          setTimeout(() => { 
            that.calculateTextNew(); //1
          }, 0);
        };
      },
      methods: { 
        // 计算文字 显示展开 收起 
        calculateTextNew() { 
          let oneHeight = this.$refs.more2.scrollHeight; // 获取一行文字的height 计算当前文字比较列表文字
          let twoHeight = oneHeight * 2; // 2行文字高度
          this.textHeight2 = `${ twoHeight}px`; // 2行文本高度px
          let txtDom = this.$refs.textContainer2; //获取总文本
          let curHeight = txtDom.offsetHeight; // 获取总文本高度
          // 若总文本高度，大于两行文本高度 展示更多按钮 的样式
          if (curHeight > twoHeight) { 
            this.testObj = true; // 展示 // this.$set(this.testObj, Object.assign(this.testObj, { status2: true }));
          } else { 
            this.testObj = false; // 隐藏 // this.$set(this.testObj, Object.assign(this.testObj, { status2: null }));
          }
        },
    
        // 展开
        moreBtn() { 
          this.testObj = !this.testObj;
          console.log(this.testObj.status2);
        },
      },
    };
    </script>
    <style lang="less" scoped>
    .list2 { 
      padding: 5px 20px;
      border-bottom: 1px solid #eaeaea;
      position: relative;
    }
    .text2 { 
      position: relative;
      color: #000;
      font-size: 14px;
    }
    .more2 { 
      visibility: hidden;
    }
    .link2 { 
      position: absolute;
      right: 30px;
      bottom: 14px;
      font-size: 12px;
      color: #2d95fe;
      width: 20px;
      height: 20px;
      transform: rotate(45deg);
      border-width: 0px 2px 2px 0px;
      border-color: red;
      border-style: solid;
    }
    .retract2 { 
      position: relative;
      overflow: hidden;
    }
    
    .retract2:after { 
      content: "...";
      position: absolute;
      bottom: 0;
      right: 2px;
      width: 60px;
      padding-left: 25px;
      background: linear-gradient(to right, transparent, #fff 45%);
    }
    </style>