Heim > Web-Frontend > js-Tutorial > Hauptteil

So lesen Sie den vollständigen Text in Vue

亚连
Freigeben: 2018-06-14 17:51:42
Original
2817 Leute haben es durchsucht

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>
Nach dem Login kopieren

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;
 }
Nach dem Login kopieren

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;
 }
 },
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!