Comment lire le texte intégral en vue

Ci-dessous, je vais partager avec vous un exemple de Vue implémentant la fonction de cliquer pour lire le texte intégral d'un article trop long. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Ajoutez directement le 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;
 }
 },
}

L'effet est le suivant :

Idées d'implémentation Points à noter :

1. Pour obtenir la hauteur du contenu, vous devez attendre que le dom soit chargé, puis ajouter une fonction setTimeout à monter pour vous assurer que

2. Lorsque la hauteur du contenu est supérieure à la hauteur que vous avez définie pour l'affichage, elle est limitée à la hauteur que vous souhaitez afficher. Ajoutez une classe pour résoudre le problème. Faites attention au débordement : caché ; 🎜>

Ce qui précède est ce que j'ai compilé. Tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment définir la couleur d'arrière-plan d'une page séparée dans Vue-cli

Actualiser et onglet dans vue Switch

Explication détaillée de l'introduction du composant elementUI dans le projet vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!