如何根据用户类型更改 VueJS 中的背景

Question

我有一个 vuejs 项目。

“用户”级别（和公共区域）具有 BG 图像 “管理员”级别具有纯白色背景。

我读到如果我在我的模板中使用标签而不使用 scoped 关键字，它会影响一切，所以我尝试了，但它没有产生预期的结果。

我尝试放入父 div，它几乎可以完美地工作，除了在注销的页面中，图像没有覆盖整个页面，一个很大的空白区域。

直到最近，我还在 header 组件的主体上使用了 css。 下面的 CSS 来自我尝试将其应用于父 div

 .backgroundCompany{ background-color: white; }.backgroundUser{ background: url('/img/bg_img.png') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; min-height: 100%; }

我对此进行了测试： Stackoverflow #49516424 和 stackoverflow #48172814

已编辑：附上 App.vue 中发生的部分截图，作为 div id=app 的样式。 否则效果很好。 管理员让纯白背景的用户看到了这个，但它并没有覆盖整个身体。

Answer 1

您的问题是在更改用户时正确地重新渲染组件。 您可以在 Vue 模板的标签中添加样式。 并在此添加：key 以重新渲染，就像这样：

  <template>
     <div :style="styleObject" :key="uniqKey">
            // your code
     </div>
   </template>

    <script>
        export default {
          data() {
             return {
               styleObject: {
                 backgroundImage: `url(${require('@/assets/path/to/your/img.jpg')})`   
              },
            uniqKey:0 // change this for re-render
          },
          methods: {
            forceRerender() {
              this.styleObject.backgroundImage = '' //new image 
              this.uniqKey+= 1;  
            }
          }
    }       
    </script>

你可以在这里阅读更多关于它的信息。

Answer 2

假设您希望更改组件的背景图像，在该组件的模板中执行此操作很简单，您可以利用 class 属性并根据 userType 动态更改 class告诉您如何获取用户类型值、计算属性、存储、http 调用等......）

<template>
  <div :class="userType === 'user' ? 'backgroundUser' : 'backgroundCompany'">
    .....
  </div>
</template>
export default {
  props: {
    userType: {
      type: String,
      required: true
    }
  }
}
<style scoped>
  .backgroundCompany{
  background-color: white;
}

.backgroundUser{
  background: url('/img/bg_img.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    min-height: 100%;
}
</style>