So lesen Sie den vollständigen Text in Vue

Im Folgenden werde ich Ihnen ein Beispiel zeigen, wie Vue die Funktion zum Lesen des vollständigen Textes eines Artikels implementiert, der zu lang ist. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Gehe direkt zum Code:

html:

<p class="bodyFont clearfloat" id="bodyFont" ref="bodyFont" :class="{bodyHeight:contentStatus}">
  <p v-html="content"></p>
</p>
<p class="contentToggle" v-if="contentStatus" @click="contentStatus=!contentStatus">阅读全文</p>

css:

.bodyFont{
 .font-dpr(16px);
 color: #333;
 text-align: left;
 line-height:58px;
 word-break:break-all;
 word-wrap:break-word;
 padding-bottom: 30px;
 height:auto;
 overflow: hidden;
 max-height: 100%;
 p{margin:16px 0 0 0;}
 }
 .bodyHeight{
 height:5000px;
 }
 .contentToggle{
 height:60px;
 line-height:60px;
 text-align: center;
 color:@red;
 border:1px solid @red;
 border-radius: 5px;
 .font-dpr(14px);
 margin-bottom:30px;
 }

js :

data(){
 return { 
  contentStatus:false, 
  curHeight:0,
  bodyHeight:5000
 }
},
mounted(){
 setTimeout(()=>{
  this.contentToggle();
 },500)
 },
methods:{
 contentToggle(){
 this.curHeight=this.$refs.bodyFont.offsetHeight;
 if(this.curHeight>this.bodyHeight){
  this.contentStatus=true;
 }else{
  this.contentStatus=false;
 }
 },
}

Der Effekt ist wie gezeigt:

Implementierungsideen und -punkte Aufmerksamkeit: 🎜>

1 Um die Höhe des Inhalts zu erhalten, müssen Sie warten, bis der Dom geladen ist, und dann eine setTimeout-Funktion hinzufügen, um die Höhe des Inhalts sicherzustellen ist wirklich erhalten.

2. Wenn die Höhe des Inhalts höher ist als die Höhe, die Sie selbst anzeigen möchten, können Sie sie nur auf die Höhe beschränken, die Sie anzeigen möchten Das Problem. Achten Sie auf den Überlauf.

Das Obige ist für alle zusammengestellt. Ich hoffe, dass es in Zukunft hilfreich sein wird.

Verwandte Artikel:

So legen Sie die Hintergrundfarbe für eine separate Seite in Vue-cli fest

Aktualisieren und Tab in Vue wechseln

Detaillierte Erläuterung der Einführung der elementUI-Komponente in das Vue-Projekt

Das obige ist der detaillierte Inhalt vonSo lesen Sie den vollständigen Text in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!