Vue-cli中為單獨(dú)頁面設(shè)置背景色的實(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,會(huì)導(dǎo)致其他頁面的背景色響應(yīng)改變,所以不可??;
2.如上面例子如果設(shè)置.finish-wrap的背景色以及高度為100%時(shí),會(huì)發(fā)現(xiàn)只是一部分的背景色發(fā)現(xiàn)改變,卻不能使整個(gè)屏幕背景色變化;
原因:打開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ú)頁面設(shè)置背景色的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)簡單的星級(jí)評(píng)分組件源碼
這篇文章主要介紹了vue星級(jí)評(píng)分組件源碼,代碼簡單易懂非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11vue+ElementUI 關(guān)閉對(duì)話框清空驗(yàn)證,清除form表單的操作
這篇文章主要介紹了vue+ElementUI 關(guān)閉對(duì)話框清空驗(yàn)證,清除form表單的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue3數(shù)據(jù)監(jiān)聽watch/watchEffect的示例代碼
我們都知道監(jiān)聽器的作用是在每次響應(yīng)式狀態(tài)發(fā)生變化時(shí)觸發(fā),在組合式?API?中,我們可以使用?watch()函數(shù)和watchEffect()函數(shù),下面我們來看下vue3如何進(jìn)行數(shù)據(jù)監(jiān)聽watch/watchEffect,感興趣的朋友一起看看吧2023-02-02關(guān)于vue的語法規(guī)則檢測(cè)報(bào)錯(cuò)問題的解決
在配置路有的時(shí)候,陸續(xù)出現(xiàn)了各種報(bào)錯(cuò)其中最多的是一些寫法,例如空格,縮進(jìn),各種括號(hào),這篇文章主要介紹了關(guān)于vue的語法規(guī)則檢測(cè)報(bào)錯(cuò)問題的解決,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-05-05