Vue-cli で別のページの背景色を設定する方法

それでは、Vue-cliで別ページの背景色を設定する実装方法を紹介します。参考になると思います。

例:

<template>
 <p class="finish-wrap">
  <p class="finish-header">
   <p class="finish-img">
   </p>
  </p>
  <p class="finish-tip">
   支付成功
  </p>
  <p class="finish-footer">
    <router-link to="/">学车所需资料</router-link>
    <span>
     <router-link to="/">学车考照流程</router-link>
    </span>
  </p>
 </p>
</template>

1. CSS で本文の背景色を直接設定すると、他のページの背景色もそれに応じて変更されるため、お勧めできません。上記の例のように、 .finish を設定すると、背景色とラップの高さが 100% になると、背景色の一部だけが変更されますが、画面全体の背景色は変更できません。

理由: app.vue を開くと、

<template>
    <p>
     <router-view></router-view>
    </p>
   </template>

が表示されます。その理由は、ここには p の別のレイヤーがあるため、変更するのは最も外側の p の背景色ではなく、ここでは変更できないためです。 、つまり:

解決策:

.finish-wrap ドキュメントフローを分離し、それに固定属性を追加する必要があります。最終結果:

.finish-wrap
background-color rgb(255,255,255)
height: 100%
position: fixed
width: 100%

上記は私が皆さんのためにコンパイルしたものです、私はそう願っています将来みんなに役立つでしょう。

関連記事:

vueでパスワードの表示/非表示切り替え機能を実装する方法

vue.jsのthis.$emitの使い方を詳しく解説

vue.jsの修飾子.self説明書？

以上がVue-cli で別のページの背景色を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。