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!