フォントサイズの設定を実装する
このステップでは、フォントサイズの設定を実装する方法を学びます。以下の手順に従ってこのステップを完了してください。
el: "#app"
の下の data
で fontSize
変数を定義し、デフォルト値を 18
に設定します。index.html
ファイルで、<div class="set-font">
要素を見つけます。ここにフォントサイズのコントロールが表示されます。
data: {
fontSize: 18,
//...
}
<span class="lang">18</span>
を見つけ、18
を fontSize
変数に置き換えます。
<span class="lang">{{ fontSize }}</span>
"A-" と "A+" のボタンに @click
ディレクティブを追加し、Vue インスタンス内の updateFontSize
メソッドにバインドします。フォントサイズを増やすか減らすかを示すブール値を渡します。
<a @click="updateFontSize(false)" class="prev">A-</a>
<a @click="updateFontSize(true)" class="next">A+</a>
Vue インスタンス内の methods
オブジェクトに updateFontSize
メソッドを追加します。このメソッドは、fontSize
データプロパティを更新し、フォントサイズが 12px から 48px の範囲内に収まるようにする必要があります。
methods: {
updateFontSize(flag) {
if (flag) {
if (this.fontSize < 48) {
this.fontSize += 2;
}
} else {
if (this.fontSize > 12) {
this.fontSize -= 2;
}
}
}
}
クラスが text-content
の <p>
要素で、:style
ディレクティブを使用して、fontSize
データプロパティに基づいてフォントサイズと行の高さを動的に設定します。
<p
class="text-content"
:style="{
'background-color': `${bgList[isActiveColor]}`,
'color': isActiveColor === 4? '#ffffff' : '#333333',
'font-size': `${fontSize}px`,
'line-height': `${fontSize + 10}px`
}"
>
<!-- content -->
</p>
これらの手順に従うことで、ヘッダーツールバーの表示と非表示の切り替え、閲覧テーマの設定、フォントサイズの設定を含む電子書籍リーダーの機能の実装が完了しました。
次に、WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。VM の上部にある "Web 8080" を開き、手動でページを更新すると、ページが表示されます。