zoukankan      html  css  js  c++  java
  • vue项目中判断文字内容超出n行显示详情按钮

    两行文本溢出显示省略号的同时,还要添加一个详情按钮点击查看全部的内容,如下图:

     html内容:

      <Row class="lh-64-r mb-20-r">
          <div class="d-i-b-v w-calc-240-r lh-32-r">
            <p class="two-line" ref="detailDom">{{ prjDetail || "-" }}</p>
          </div>
          <a v-if="showDetailBtn" class="d-i-b-b lh-32-r more-btn-unit fw-bold" @click="">详情</a>
        </Row>

    参数:

    data() {
          return {
            prjDetail: “”,   // 详情
            showDetailBtn: false,    // 是否显示“详情”按钮
            detailDom: "", // 详情dom
          }
        },

    初始化及监听:

        mounted() {
           // 判断详情是否溢出
            this.detailDom = this.$refs.detailDom;
            this.showDetailBtnFun();
            window.addEventListener('resize', this.showDetailBtnFun);
        },

    判断文本是否溢出方法:

           /**
           * 判断文本是否溢出
           * 特殊:如果文字长度刚好达到某个临界值,会出现不及时刷新出现按钮的情况,解决方案:使用this.$nextTick强制刷新
           */
          showDetailBtnFun() {
              this.$nextTick(()=>{
                  this.detailDom = this.$refs.detailDom;
                  this.showDetailBtn = this.detailDom.clientHeight < this.detailDom.scrollHeight;
              })
          },

    在请求数据接口后,调用this.showDetailBtnFun();即可刷新是否显示详情按钮

  • 相关阅读:
    转:五年java人的一点感悟
    6:ZigZag Conversion
    5:Longest Palindromic Substring
    4:Median of Two Sorted Arrays
    3:Longest Substring Without Repeating Characters
    读写分离
    docker swarm部署spring cloud服务
    kubeadm方式安装kubernetes
    《Spring Boot 实战》随记
    https部署
  • 原文地址:https://www.cnblogs.com/stella1024/p/12362019.html
Copyright © 2011-2022 走看看