Vue修改单独页面body样式


Vue修改单独页面 body样式

由于SPA页面的特性,传统的设置 body 背景色的方法并不通用。
可以通过导航守卫或设置组件内第一个DIV样式实现。

方法一 设置导航守卫

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import BasicLayout from "@/layouts/BasicLayout.vue";

const beforeRouteEnter = (to, from, next) => {
    next(vm => {
        // 设置Body背景颜色
        window.document.body.style.backgroundColor='#333';
    });
};
@Component({
  components: {
    BasicLayout
  },
  beforeRouteEnter
})

export default class Home extends Vue {}
</script>

方法二 设置组件内第一个DIV样式

template

<template>
  <div class="home">
  </div>
</template>

CSS

<style scoped lang="less">
@global-background: #333;
.home {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-color: @global-background;
}
</style>

声明:初心|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Vue修改单独页面body样式


愿你勿忘初心,并从始至终