Implementierungscode für mehrzeilige Textkomponenten der Vue-Faltanzeige

<Vorlage>
  <div Klasse="text-expand" ref="textExpand">
    <div v-if="!(showPopover && showPopoverJudge)">
      <span class="text-expand-content" :style="expandStyle">
        {{ (Text === null || Text === undefiniert || Text === '') ? '--' : Text }}
      </span>
      <div Klasse="Expander">
        <span
          v-if="showBtn && showBtnJudge"
        >
          <span
            v-if="!Vollständige Anzeige"
            Klasse = "Aktion, Aktion-erweitern"
            @click.stop="showFullFn(true)"
          >
            Erweitern<i v-if="showBtnIcon" class="iconfont iconxiajiantou" />
          </span>
          <span
            v-sonst
            Klasse = "Aktion Aktionspaket"
            @click.stop="showFullFn(false)"
          >
            Ausblenden <i v-if="showBtnIcon" class="iconfont iconshangjiantou" />
          </span>
        </span>
      </div>
    </div>
    <el-popover
      v-sonst
      :Platzierung="Popover-Platz"
      Auslöser="hover">
      <div Klasse="Popover-Inhalt">
        {{ text }}
      </div>
      <span class="text-expand-content" :style="expandStyle" slot="reference">{{ text }}</span>
    </el-popover>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: "TextExpand",
  Requisiten: {
    text: { // Textinhaltstyp: String,
      Standard: () => '
    },
    expand: { // Falten und die Anzahl der Zeilen anzeigen Typ: Zahl,
      Standard: () => 3
    },
    showBtn: { // Erweitern, Reduzieren Schaltflächentyp: Boolean,
      Standard: true
    },
    showBtnIcon: { // Symbol erweitern, reduzieren
      Typ: Boolean,
      Standard: true
    },
    showPopover: { // Popover zeigt den gesamten Text an Typ: Boolean,
      Standard: false
    },
    popoverPlace: { // Popover-Position Typ: String,
      Standard: „unten“
    }
  },
  Daten () {
    zurückkehren {
      showFull: false, // Ob der vollständige Text angezeigt werden soll expandStyle: '',
      showBtnJudge: false, //Beurteilen, ob die Schaltfläche gefaltet und angezeigt werden soll. showPopoverJudge: false //Beurteilen, ob das Popover gefaltet und angezeigt werden soll.
    }
  },
  betrachten:
    Text: Funktion (Wert) {
      dies.richterExpand()
    }
  },
  montiert () { 
    dies.richterExpand()
  },
  Methoden: {
    showFullFn (Wert) {
      this.expandStyle = Wert? '': `Anzeige: -webkit-box; Wortumbruch: alles umbrechen; -webkit-Zeilenklemme: ${this.expand}; -webkit-box-orient: vertikal; Textüberlauf: Auslassungspunkte; Überlauf: ausgeblendet;`
      this.showFull = Wert
    },
    judgeExpand () { //Beurteilen, ob dies reduziert werden soll.$nextTick(() => {
        const { expand } = dies;
        const textExpandStyle = window.getComputedStyle(this.$refs.textExpand)
        const textExpandHeight = parseFloat(textExpandStyle.height) //Gesamthöhe ermitteln const textExpandLineHeight = parseFloat(textExpandStyle.lineHeight) //Zeilenhöhe ermitteln // Zeilenhöhe berechnen const rects = Math.ceil(textExpandHeight / textExpandLineHeight)
        if (rects <= expand) { // Kein Ausklappen und Anzeigen nötig.showBtnJudge = false
          this.showPopoverJudge = falsch
        } anders {
          this.showBtnJudge = wahr
          this.showPopoverJudge = true
          this.expandStyle = `Anzeige: -webkit-box;Worttrennung: alles umbrechen;-webkit-Zeilenklemme: ${this.expand};-webkit-box-orient: vertikal;Textüberlauf: Auslassungspunkte;Überlauf: ausgeblendet;`
        }
      })
    }

  }
}
</Skript>
<style lang="less" scoped>
.text-expand{
  &-Inhalt{
    Wörtertrennung: alles trennen;
    Leerzeichen: vor dem Umbruch;
  }
  .expander {
    Textausrichtung: links;
    Rand oben: 6px;
    .Aktion {
      Anzeige: Inline-Block;
      Schriftgröße: 14px;
      Farbe: #0281F0;
      Cursor: Zeiger;
      ich {
        Anzeige: inline;
        Schriftgröße: 12px;
      }
    }
    .Aktion.Aktionspaket {
      Rand links: 0;
    }
  }
}
.popover-Inhalt{
  maximale Breite: 40vw;
  max. Höhe: 30vh;
  Überlauf: versteckt;
  Wörtertrennung: alles trennen;
  Überlauf-y: automatisch;
}
</Stil>