vue項(xiàng)目中頁(yè)面底部出現(xiàn)白邊及空白區(qū)域錯(cuò)誤的問(wèn)題
更新時(shí)間：2022年08月25日 09:25:31 作者：斜影梧桐
這篇文章主要介紹了vue項(xiàng)目中頁(yè)面底部出現(xiàn)白邊及空白區(qū)域錯(cuò)誤的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue頁(yè)面底部出現(xiàn)白邊及空白區(qū)域錯(cuò)誤問(wèn)題
頁(yè)面底部出現(xiàn)白邊
類似于這種
我的把body，app，html里面的margin和padding都設(shè)置為0了但是還是有白邊出現(xiàn)，最后找到的解決方法：
把a(bǔ)pp里面的全局背景圖換到了body里面，然后白邊就沒(méi)了
看到一個(gè)解釋是：白邊可能是vue框架弄的
故解決辦法是：把body也設(shè)置背景色
底部出現(xiàn)空白區(qū)域
檢查內(nèi)容區(qū)是否超出html區(qū)域
vue頁(yè)面四周有白邊的問(wèn)題
在export default的代碼中添加如下代碼，設(shè)置body的屬性margin:0和padding:0
beforeRouteEnter(to, from, next) {
? ? ? // 添加背景色 margin:0;padding:0是為了解決vue四周有白邊的問(wèn)題
? ? ? document.querySelector('body').setAttribute('style', 'margin:0;padding:0')
? ? ? next()
? ? },
? ? beforeRouteLeave(to, from, next) {
? ? ? // 去除背景色
? ? ? document.querySelector('body').setAttribute('style', '')
? ? ? next()
? ? },再刷新下看看，四周的白邊已經(jīng)消失了
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue element動(dòng)態(tài)渲染、移除表單并添加驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了vue element動(dòng)態(tài)渲染、移除表單并添加驗(yàn)證的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
在許多應(yīng)用程序中，我們經(jīng)常需要執(zhí)行定期的異步任務(wù)輪詢，本文就介紹了Vue3如何處理異步任務(wù)輪詢，感興趣的可以了解一下2023-05-05
這篇文章主要介紹了Vue頁(yè)面堆棧管理器2021-10-10
這篇文章主要介紹了vue如何實(shí)現(xiàn)自定義步驟條問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
vue實(shí)現(xiàn)給div綁定keyup的enter事件
這篇文章主要介紹了vue實(shí)現(xiàn)給div綁定keyup的enter事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
使用Vue-router二級(jí)路由跳轉(zhuǎn)另一條路由下的子級(jí)
這篇文章主要介紹了使用Vue-router二級(jí)路由跳轉(zhuǎn)另一條路由下的子級(jí)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue項(xiàng)目頁(yè)面嵌入代碼塊vue-prism-editor的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目頁(yè)面嵌入代碼塊vue-prism-editor的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
這篇文章主要給大家介紹了關(guān)于Vue中keep-alive組件的深入理解，文中通過(guò)實(shí)例代碼結(jié)束的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
Vue中的v-model綁定修飾符的實(shí)現(xiàn)原理
v-model 是Vue.js中的一個(gè)重要指令,通過(guò)它我們可以輕松實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,本文介紹一些常用的 v-model 綁定修飾符,并解析它們的實(shí)現(xiàn)原理,感興趣的朋友一起看看吧2024-01-01
這篇文章主要為大家詳細(xì)介紹了基于Vue實(shí)現(xiàn)timepicker效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04