Vue js更改背景颜色很困难。

Question

Vue js更改背景颜色很困难。

javascriptcssvue.js

7

我试图将着陆页面的背景颜色设置为橙色，但问题在于当前的设置会使得所有页面都变成橙色。

我尝试给着陆页面添加scoped，这样它就只会对该页面进行样式设置，但这么做之后整个页面都不再是橙色了。

最终目标是只影响着陆页面。

我已经尝试过使用 HTML 和 Body 代替 ' * '，但它们在这种情况下也无法正常工作。

landingpage.vue：

<template>
    <div class="container">
        <div class=landing>
            <h1>Hello.</h1>
            <router-link to="/work">
                <button id="work" type="button">See my work</button>
            </router-link>
            <router-link to="/home">
                <button id="home" type="button">Go home</button>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Landing',
};
</script>

<style scoped>
* {
    background: orange;
}

h1 {
    margin-top: 100px;
    text-align: center;
    font-size: 80px;
    color: green;
}
#work {
    color: green;
    border: none;
    font-size: 25px;
    text-decoration: none;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#work:hover {
    color: white;
}
#home{
    color: green;
    border: none;
    font-size: 15px;
    text-decoration: none;
    margin: 0;
    position: absolute;
    top: 70%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#home:hover {
    color: white;
}
</style>

- user14875201

4个回答

0

使用新的组合 API，代码看起来像这样：

setup() {
  var color = "#343E3D";
  onMounted(() => {
    console.log("mounted!");
    document.body.style.backgroundColor = color;
  });
  onUnmounted(() => {
    console.log("unmounted!");
    document.body.style.backgroundColor = null;
  });
  return {};
},

这两个生命周期钩子将在组件加载/卸载时更改背景。我曾经遇到一个类似的问题，一个页面需要与网站的其他部分不同的背景。

- Mora Ogunro

0

你还可以动态绑定类，使其仅适用于着陆页路由。

因此，在 App.vue 或充当应用程序外壳的任何上层组件中，您可以执行以下操作：

/* ==== in App.vue (or Landing Page parent Component) ==== */
<template>
  <div :class={orangeBackground: $route.path.includes('/landingPagePath')}>
     // other stuff could be here - like the router view or whatever
     <router-view> </router-view>
  </div>   
</template>
<script>
</script>
<style>
.orangeBackground {
    background: orange;
}
</style>

基本思路是整个DOM都包含在父组件中，但只有当浏览器位于着陆页路由时，我们才应用.orangeBackground类。

- Bankole Alex-Esan

0

不是

* {
    background: orange;
}

做

html {
    background: orange;
}

或者

body {
    background: orange;
}

- David YK Han

在“*”之前，我尝试了几种不同的方法。我尝试了body和html，但两者都使我的整个页面变成了白色。 - user14875201

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ezra Siton · Accepted Answer

HTML和body位于应用程序之外(+ Vue Router = SPA => 当您从page-1转到page-2时，body/html不会重新渲染)。

"问题一" - SPA

单文件组件- body，html样式仅在页面刷新时应用（例如，从page-1转到page-2并点击F5）：

<!-- page_2 -->
<style>
   body{
    background: orange; /* not apply if you go from page-1 to page-2 */
   }
</style>

"问题二" - "超出作用域"

scoped == CSS 仅适用于当前组件的元素。 body 不属于 当前作用域组件的一部分。

Hello World 解决方案

解决此问题最基本的 "hello world" 非动态想法是使用生命周期钩子 - 在 created 中通过简单的 JS 更改 body 的背景色，在 destroyed 中删除该背景色。

<script>
export default {
  name: "orange-page",
  created: function () {
    document.body.style.backgroundColor = "orange";
  },
  destroyed: function () {
    document.body.style.backgroundColor = null;
  },
};
</script>

"min:100vh app"

一个更好的想法是在你的#app中添加“wrapper”+样式min:100vh（#app将覆盖整个body/html ***设置：body{margin:0;}）。

相关示例：https://www.pluralsight.com/guides/change-page-background-color-each-route

Vue js更改背景颜色很困难。

Hello World 解决方案

"min:100vh app"

更多想法：

CSS