Vue-cli中為單獨頁面設(shè)置背景色的實現(xiàn)方法

更新時間：2018年02月11日 10:15:22 作者：vinkyfung

下面小編就為大家分享一篇Vue-cli中為單獨頁面設(shè)置背景色的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

例子：

<template>
 <div class="finish-wrap">
  <div class="finish-header">
   <div class="finish-img">
   </div>
  </div>
  <div class="finish-tip">
   支付成功
  </div>
  <div class="finish-footer">
    <router-link to="/">學(xué)車所需資料</router-link>
    <span>
     <router-link to="/">學(xué)車考照流程</router-link>
    </span>
  </div>
 </div>
</template>

1.如果直接在css中設(shè)置body的background-color，會導(dǎo)致其他頁面的背景色響應(yīng)改變，所以不可取；

2.如上面例子如果設(shè)置.finish-wrap的背景色以及高度為100%時，會發(fā)現(xiàn)只是一部分的背景色發(fā)現(xiàn)改變，卻不能使整個屏幕背景色變化；

原因：打開app.vue，你會看到

<template>
    <div>
     <router-view></router-view>
    </div>
   </template>

原因就是這里還有一層div，所以你改變的不是最外層的div背景色，但是你有不能修改這里，所以：

解決方法：

我們要讓.finish-wrap脫離文檔流，為他添加個fixed屬性，最后結(jié)果：

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

以上這篇Vue-cli中為單獨頁面設(shè)置背景色的實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue.js在標(biāo)簽屬性中插入變量參數(shù)的方法
這篇文章主要介紹了vue.js在標(biāo)簽屬性中插入變量參數(shù)的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2018-03-03
Vue.use與Vue.prototype的區(qū)別及說明
這篇文章主要介紹了Vue.use與Vue.prototype的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue+Element實現(xiàn)登錄隨機驗證碼
這篇文章主要為大家詳細介紹了vue+Element實現(xiàn)登錄隨機驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue.js從安裝到搭建過程詳解
這篇文章主要為大家詳細介紹了vuejs從安裝到搭建的整個過程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
vue使用canvas手寫輸入識別中文
這篇文章主要介紹了vue使用canvas手寫輸入識別中文，工作時遇到一些項目如：系統(tǒng)上的輸入法使用不方便，客戶要求做一個嵌入web網(wǎng)頁的手寫輸入法。下面我們來看看文章得具體描述吧
2021-11-11
VUE 直接通過JS 修改html對象的值導(dǎo)致沒有更新到數(shù)據(jù)中解決方法分析
這篇文章主要介紹了VUE 直接通過JS 修改html對象的值導(dǎo)致沒有更新到數(shù)據(jù)中解決方法,結(jié)合實例形式詳細分析了VUE使用JS修改html對象的值導(dǎo)致沒有更新到數(shù)據(jù)的原因與解決方法,需要的朋友可以參考下
2019-12-12
Vue的Eslint配置文件eslintrc.js說明與規(guī)則介紹
最近在跟著視頻敲項目時，代碼提示出現(xiàn)很多奇奇怪怪的錯誤提示，百度了一下是eslintrc.js文件沒有配置相關(guān)命令，ESlint的語法檢測真的令人抓狂，現(xiàn)在總結(jié)一下這些命令的解釋
2020-02-02
vue源碼之批量異步更新策略的深入解析
這篇文章主要給大家介紹了關(guān)于vue源碼之批量異步更新策略的相關(guān)資料，關(guān)于vue異步更新是我們?nèi)粘ｉ_發(fā)中經(jīng)常遇到的一個功能，需要的朋友可以參考下
2021-05-05
vue中process.env的具體使用
本文主要介紹了vue中process.env的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-03-03
vue2實現(xiàn)簡易時鐘效果
這篇文章主要為大家詳細介紹了vue2實現(xiàn)簡易時鐘效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08