Maison > interface Web > js tutoriel > le corps du texte

Comment lire le texte intégral en vue

亚连
Libérer: 2018-06-14 17:51:42
original
2864 Les gens l'ont consulté

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>
Copier après la connexion

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;
 }
Copier après la connexion

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;
 }
 },
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!