Vue body樣式修改方式
更新時間：2023年01月17日 15:02:17 作者：毛毛蟲嗚嗚
這篇文章主要介紹了Vue body樣式修改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue body樣式修改
這篇文章記錄自己再寫項目是遇到的App.vue顯示問題。
問題：查看頁面時，發(fā)現(xiàn)有8px的margin,看著很不爽，想要去掉這個margin。
修改前：直接上圖
解決方式
通過beforeCreate函數(shù)設置App.vue中body的樣式
export default {
beforeCreate() {
document.querySelector('body').setAttribute('style', 'margin:0;')
},
}
可以明顯看出，外邊距已經(jīng)沒有了，over。
vue給body單獨設置樣式
在vue項目中，有時候會需要給單獨的頁面中的body設置樣式，下面是兩種方法
1.在beforeCreate()中給body添加屬性
? beforeCreate() {
? ? ? ? ? ? document.querySelector('body').setAttribute('style', 'background-color:#fffcf5;')
? ? ? ? },2.給最外層的div添加個類名，然后處理
<template>
? ? <div class="body-bg"></div>
</template>
<style scoped lang="scss">
? ? .body-bg {
? ? ? ? position: absolute;
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? ? ? top: 0;
? ? ? ? left: 0;
? ? ? ? overflow-y: auto;
? ? ? ? background-color: #fff;
? ? }
</style>目前就知道這兩種，以后看到了再補充吧
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
跨域，跨的是不同域，也就是協(xié)議或主機或或端口號不同造成的現(xiàn)象，本文給大家分享vue3解決跨域問題詳細代碼親測有效，感興趣的朋友跟隨小編一起看看吧2022-11-11
這篇文章主要給大家介紹了關(guān)于如何啟動node.js文件的3個方法,文中通過圖文以及實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了Vue概念及常見命令，介紹了vue.js聲明式渲染、雙向綁定及常用指令,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
本篇文章給大家分享了vue2單元測試環(huán)境搭建的詳細步驟，對此有需要的朋友參考學習下。2018-05-05
最近學習vue.js有一段時間了，使用vue做了一套后臺管理系統(tǒng)，其中使用最多就是遞歸組件，也因為自己對官方文檔的不熟悉使得自己踩了不少坑，所以今天寫出來和大家一起分享。有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
這篇文章主要介紹了vue?如何引入本地某個文件?require，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vscode 開發(fā)Vue項目的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
element?ui設置table自適應表格寬,不自動換行問題
這篇文章主要介紹了element?ui設置table自適應表格寬,不自動換行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vue實現(xiàn)桌面向網(wǎng)頁拖動文件的示例代碼(可顯示圖片/音頻/視頻)
這篇文章主要介紹了vue實現(xiàn)桌面向網(wǎng)頁拖動文件的示例代碼(可顯示圖片/音頻/視頻),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
本篇文章主要介紹了詳解前后端分離之VueJS前端，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05