<tbody id="5vw1z"></tbody>
<rp id="5vw1z"></rp>
  •  

    Vue 實現文本溢出展開收起詳情功能

    這類功能很常見,其實之前也寫過,今天特意整理出來分享給大家,我這里分裝成一個組件,大家有需要的可以復制即用。

    完整代碼:

    <template>
      <div class="text-expand" ref="textExpand">
        <div v-if="!(showPopover && showPopoverJudge)">
          <span class="text-expand-content" :style="expandStyle">
            {{ text === null || text === undefined || text === '' ? '--' : text }}
          </span>
          <div class="expander">
            <span v-if="showBtn && showBtnJudge">
              <span v-if="!showFull" class="action action-expand" @click.stop="showFullFn(true)">
                展開
                <i v-if="showBtnIcon" class="el-icon-caret-bottom" />
              </span>
              <span v-else class="action action-pack" @click.stop="showFullFn(false)">
                收起
                <i v-if="showBtnIcon" class="el-icon-caret-top" />
              </span>
            </span>
          </div>
        </div>
        <el-popover v-else :placement="popoverPlace" trigger="hover">
          <div class="popover-content">
            {{ text }}
          </div>
          <span class="text-expand-content" :style="expandStyle" slot="reference">{{ text }}</span>
        </el-popover>
      </div>
    </template>
    <script>
    export default {
      props: {
        text: {
          // 文本內容
          type: String,
          default: () => '',
        },
        expand: {
          // 折疊顯示行數
          type: Number,
          default: () => 3,
        },
        showBtn: {
          // 展開、折疊按鈕
          type: Boolean,
          default: true,
        },
        showBtnIcon: {
          // 展開、折疊icon
          type: Boolean,
          default: true,
        },
        showPopover: {
          // popover顯示全文本
          type: Boolean,
          default: false,
        },
        popoverPlace: {
          // popover位置
          type: String,
          default: 'bottom',
        },
      },
      data() {
        return {
          showFull: false, // 是否展示全文本
          expandStyle: '',
          showBtnJudge: false, // 判斷是否需要折疊展示按鈕
          showPopoverJudge: false, // 判斷是否需要折疊展示popover
        };
      },
      watch: {
        text: function () {
          this.textExpand();
        },
      },
      mounted() {
        this.textExpand();
      },
      methods: {
        showFullFn(value) {
          this.expandStyle = value
            ? ''
            : `display: -webkit-box;word-break: break-all;-webkit-line-clamp: ${this.expand};-webkit-box-orient: vertical;text-overflow: ellipsis;overflow: hidden;`;
          this.showFull = value;
        },
        textExpand() {
          // 判斷是否需要折疊
          this.$nextTick(() => {
            const { expand } = this;
            const textExpandStyle = window.getComputedStyle(this.$refs.textExpand);
            const textExpandHeight = parseFloat(textExpandStyle.height); //獲取總高度
            const textExpandLineHeight = parseFloat(textExpandStyle.lineHeight); //獲取行高
            // 計算行高
            const rects = Math.ceil(textExpandHeight / textExpandLineHeight);
            if (rects <= expand) {
              // 不需要折疊展示
              this.showBtnJudge = false;
              this.showPopoverJudge = false;
            } else {
              this.showBtnJudge = true;
              this.showPopoverJudge = true;
              this.expandStyle = `display: -webkit-box;word-break: break-all;-webkit-line-clamp: ${this.expand};-webkit-box-orient: vertical;text-overflow: ellipsis;overflow: hidden;`;
            }
          });
        },
      },
    };
    </script>
    <style lang="less" scoped>
    .text-expand {
      &-content {
        word-break: break-all;
        white-space: pre-wrap;
      }
      .expander {
        text-align: right;
        .action {
          display: inline-block;
          font-size: 14px;
          color: #0281f0;
          cursor: pointer;
          i {
            display: inline;
            font-size: 12px;
          }
        }
        .action.action-pack {
          margin-left: 0;
        }
      }
    }
    .popover-content {
      max-width: 40vw;
      max-height: 30vh;
      overflow: hidden;
      overflow-y: auto;
      word-break: break-all;
    }
    </style>
    

    總結

    以上就是今天要分享的內容,本文僅僅簡單介紹了平常工作中常見的需求,同一種需求不同狀態下寫,代碼也會不一樣,寫文章也是為了更好的總結,從中慢慢積累經驗。

    「點點贊賞,手留余香」

    1

    給作者打賞,鼓勵TA抓緊創作!

    微信微信 支付寶支付寶

    還沒有人贊賞,快來當第一個贊賞的人吧!

    聲明:
    1. 本站所有文章教程及資源素材均來源于網絡與用戶分享或為本站原創,僅限用于學習和研究。
    2. 如果內容損害你的權益請聯系客服QQ:1642748312給予處理。
    碼云筆記 » Vue 實現文本溢出展開收起詳情功能

    發表回復

    IT互聯網行業相關廣告投放 更專業 更精準

    立即查看 聯系我們
    亚洲 自拍 另类小说综合图区