vue中给body单独设置样式

最新推荐文章于 2025-03-12 11:15:48 发布

原创最新推荐文章于 2025-03-12 11:15:48 发布 · 1.5w 阅读

15 ·

CC 4.0 BY-SA版权

大把小米

本文介绍了在Vue项目中为特定页面的body元素设置样式的方法，包括直接修改body属性和通过添加类名来实现。前者在组件的生命周期钩子beforeCreate中执行，后者则在模板中为根div添加类名并定义相关样式。

在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>