vue 3：如何在特定页面中更改身体背景颜色

发布于 2025-01-20 10:57:46 字数 247 浏览 1 评论 0原文

使用 vue 3，仅当我访问登录页面时，我才需要更改正文背景颜色。

我的index.html是：

<body class="body">
 
   <div id="app"></div>
   <!-- built files will be auto injected -->

</body>

如何从组件或vue路由器更改主体背景颜色？

原文

with vue 3 i need to change the body background color only when i visit a signin page.

My index.html is:

<body class="body">
 
   <div id="app"></div>
   <!-- built files will be auto injected -->

</body>

How can i change the body background color from a component or from vue router?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只为守护你 2025-01-27 10:57:46

在应用程序组件中，如果路线与您所需的路线匹配，您可以在顶级元素上放置一个条件类。只要您的顶级元素是主体的完整高度和宽度。

<template>
  <div class="background" :class="{ otherColor: isSignIn }">
    <div id="app"></div>
  </div>
</template>

<script>
export default {
  computed: {
    isSignIn() {
      return this.$route.path === '/signIn';
    }
  }
}
</script>

<style>
.background {
  height: 100vh;
  width: 100vw;
  background-color: #ffffff;
}

.otherColor {
  background-color: #d4d4d4; // whatever background color you want.
}
</style>

In the App component you can put a conditional class on the top level element if the route matches your desired route. As long as your top level element is full height and width of the body.

<template>
  <div class="background" :class="{ otherColor: isSignIn }">
    <div id="app"></div>
  </div>
</template>

<script>
export default {
  computed: {
    isSignIn() {
      return this.$route.path === '/signIn';
    }
  }
}
</script>

<style>
.background {
  height: 100vh;
  width: 100vw;
  background-color: #ffffff;
}

.otherColor {
  background-color: #d4d4d4; // whatever background color you want.
}
</style>

回复收藏 0 原文

~没有更多了~