vue-cli为页面设置body背景颜色

最新推荐文章于 2024-07-08 16:22:31 发布

omg_lwf

最新推荐文章于 2024-07-08 16:22:31 发布

阅读量1.1w

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/omg_lwf/article/details/80713199

版权

vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.直接在当前的page内设置如下：

 mounted() {
    document.querySelector('body').setAttribute('style', 'background-color:#f8f8f8')
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },

2.在全局路由钩子那边添加判断：

if (to.meta.name == "release") {
       document.querySelector("body").setAttribute("style","background-color: #fff")
       next();
 }else {
     document.querySelector("body").setAttribute("style","background-color: #EEEEEE")
     next();
 }

3.不通过设置body，而去设置page内的某一个区域

通过弹性布局：

<body>
  <div class="con">
    <header>头部</header/>
    <div class="container"></div>
   </div>
<body>
<style>
 body{
   overflow-y:hidden;
 }
 .con {
   display: flex;
   flex-direction: column;
   
}
.con header {
   flex-basis: 40px;
   height: 40px;
}
.con .container {
   flex: 1;
   overflow-y: scroll;
   background: red;
}


</style>