ホームページ > 記事 > ウェブフロントエンド > vueで全文を読む方法
以下に、長すぎる記事をクリックして全文を読む機能を Vue で実装した例を紹介します。これは非常に参考になるので、皆さんの参考になれば幸いです。
コードに直接移動します:
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; } }, }
効果は次のとおりです:
導入のアイデアとポイント注:
1. コンテンツの高さを取得するには、dom がロードされるまで待機し、実際に取得できることを確認するために setTimeout 関数を追加する必要があります。コンテンツの高さが表示するように設定した高さより高い場合、表示したい高さのみに制限し、それを解決するクラスを追加し、オーバーフローに注意してください: hidden; 上記は私がコンパイルしたものです。皆さんにとって、今後も皆さんのお役に立てば幸いです。
関連記事:
Vue-cliで別ページの背景色を設定する方法詳しい説明 vueプロジェクトにelementUIコンポーネントを導入する
以上がvueで全文を読む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。