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

Posted 2023-02-23

【中文标题】如何根据用户类型更改 VueJS 中的背景

【英文标题】：How to change background in VueJS per user type

【发布时间】：2020-09-11 00:26:36

【问题描述】：

我有一个 vuejs 项目。

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

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

我尝试放入父 div，它几乎可以正常工作，除了在退出页面时，图像不会覆盖整个页面，一个很大的空白区域。

直到最近我才在 header 组件的 body 上使用 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%;

我对此进行了测试：*** #49516424 和 and *** #48172814

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

【参考方案1】：

假设您希望更改组件的背景图像，在该组件的模板中执行此操作很简单，您可以利用类属性并根据 userType 动态更改类（这里我从道具中获取但如何获取用户类型值、计算属性、存储、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>

【讨论】：

不，不是组件，我成功地做到了，我的字面意思是body标签。我以前的测试有 userHeader 和 adminHeader 组件，其样式标签没有作用域。每个都有一个 body CSS。

我可以测试一个类似的方法，但分配 body 而不是 backgroundUser 和 backgroundCompany，看看它是如何工作的。

【参考方案2】：

您的问题是在更改用户时正确地重新渲染组件。您可以在 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>

您可以阅读更多关于它的信息here。