快捷導(dǎo)航

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

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

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

例子：

<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，會(huì)導(dǎo)致其他頁(yè)面的背景色響應(yīng)改變，所以不可??；

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

原因：打開(kāi)app.vue，你會(huì)看到

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

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

解決方法：

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

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

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

您可能感興趣的文章:

相關(guān)文章

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