如何根據用戶類型更改 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>