Vue 折りたたみ表示の複数行テキスト コンポーネントの実装コード

<テンプレート>
  <div class="text-expand" ref="textExpand">
    <div v-if="!(showPopover && showPopoverJudge)">
      <span class="text-expand-content" :style="expandStyle">
        {{ (text === null || text === 未定義 || text === '') ? '--' : テキスト }}
      </span>
      <div class="expander">
        <span
          v-if="showBtn && showBtnJudge"
        >
          <span
            v-if="!showFull"
            クラス="アクションアクション展開"
            @click.stop="showFullFn(true)"
          >
            展開<i v-if="showBtnIcon" class="iconfont iconxiajiantou" />
          </span>
          <span
            v-else
            クラス="アクションアクションパック"
            @click.stop="showFullFn(false)"
          >
            非表示 <i v-if="showBtnIcon" class="iconfont iconshangjiantou" />
          </span>
        </span>
      </div>
    </div>
    <el-popover
      v-else
      :placement="ポップオーバー場所"
      トリガー="ホバー">
      <div class="popover-content">
        {{ 文章 }}
      </div>
      <span class="text-expand-content" :style="expandStyle" slot="reference">{{ テキスト }}</span>
    </el-popover>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: "TextExpand",
  小道具: {
    text: { // テキストコンテンツタイプ: 文字列、
      デフォルト: () => ''
    },
    expand: { // 折り返して行数を表示する type: Number,
      デフォルト: () => 3
    },
    showBtn: { // 展開、折りたたみボタンタイプ: ブール値、
      デフォルト: true
    },
    showBtnIcon: { // 展開、折りたたみアイコン
      タイプ: ブール値、
      デフォルト: true
    },
    showPopover: { // ポップオーバーに全文を表示 type: Boolean,
      デフォルト: false
    },
    popoverPlace: { // ポップオーバーの位置タイプ: 文字列、
      デフォルト: '下'
    }
  },
  データ （） {
    戻る {
      showFull: false, // 全文を表示するかどうか expandStyle: '',
      showBtnJudge: false, //ボタンを折りたたんで表示するかどうかを判断 showPopoverJudge: false //ポップオーバーを折りたたんで表示するかどうかを判断
    }
  },
  時計：
    テキスト: 関数 (val) {
      this.judgeExpand()
    }
  },
  マウントされた（）{ 
    this.judgeExpand()
  },
  メソッド: {
    showFullFn (値) {
      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 = 値
    },
    judgeExpand () { //折りたたむかどうかを判断します。$nextTick(() => {
        const {展開} = this;
        定数 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
        } それ以外 {
          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;`
        }
      })
    }

  }
}
</スクリプト>
<style lang="less" スコープ>
.text-expand{
  ＆-コンテンツ{
    単語区切り: 全区切り;
    空白: 事前ラップ;
  }
  .エキスパンダー{
    テキスト配置: 左;
    上マージン: 6px;
    。アクション {
      表示: インラインブロック;
      フォントサイズ: 14px;
      色: #0281F0;
      カーソル: ポインタ;
      私 {
        表示: インライン;
        フォントサイズ: 12px;
      }
    }
    .action.アクションパック{
      左マージン: 0;
    }
  }
}
.ポップオーバーコンテンツ{
  最大幅: 40vw;
  最大高さ: 30vh;
  オーバーフロー: 非表示;
  単語区切り: 全区切り;
  オーバーフロー-y: 自動;
}
</スタイル>