VueJs: Как изменить CSS фоновое изображение для каждого маршрута страницы? - PullRequest
Новая
       52

VueJs: Как изменить CSS фоновое изображение для каждого маршрута страницы?

1 голос
/ 08 мая 2020

Я, вероятно, усложняю это, чем должно быть, но есть ли у кого-нибудь идеи, как я могу заменить пользовательские изображения баннеров для каждой из моих страниц (при изменении маршрута на что-либо, кроме страницы индекса)? У меня работают слоты, но мне нужен способ изменить фоновое изображение в неиндексных баннерах. Вот мой код:

App.vue и показывает только баннер главной страницы: 

<template>
  <div id="app">
    <BannerHome v-if="isHomeView" />
    <main id="routerView">
      <RouterView :key="$route.fullPath" />
    </main>
    <Footer />
  </div>
</template>

<script>
import BannerHome from '@/components/BannerHome.vue'
import Footer from '@/components/Footer.vue'

export default {
  name: 'App',
  components: {
    BannerHome,
    Footer
  },
  computed: {
    isHomeView() {
      return this.$route.fullPath === '/'
    }
  }
}
</script>

Пример неиндексной страницы (About.vue): 

<template>
  <article>
    <banner>
      <template v-slot:titleTop>Mission Focused</template>
      <template v-slot:titleBottom>
        Dedicated To Service
      </template>
    </banner>
    <section class="container-md pb-5">
      <h1>About Page</h1>
    </section>
  </article>
</template>

<script>
import Banner from '@/components/Banner.vue'
export default {
  name: 'About',
  components: {
    Banner
  }
}
</script>

Баннерный компонент для неиндексных страниц (Banner.vue). Обратите внимание на фоновое изображение. Как я могу поменять это для каждой неиндексной страницы? Прямо сейчас фоновое изображение отображается для ВСЕХ неиндексных страниц. 

<template>
<header>
  <MainNav />
    <div class="container">
    <h1><em><slot name="titleTop"></slot><br />
    <span class="pl-3"><slot name="titleBottom"></slot></span></em>
      </h1>
  </div>
</header>
</template>

<script>
import MainNav from '@/components/MainNav.vue'
export default {
    name: 'Banner',
  components: {
    MainNav
  }
}
</script>

<style lang="scss" scoped>

header {
    position: relative;
    width: 100%;
  // set this page height here
  height: 20em;
  text-transform: uppercase;
}
header::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 6em;
    width: 100%;
  // set this page height here
    height: calc(20em + 10em);
    z-index: -1;
    transform: skewY(-3.5deg);
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../assets/mockphoto.jpg') < -----how to swap out this image?
            no-repeat left top,
        linear-gradient(#4e4376, #2b5876);
    background-size: cover;
    border-bottom: 0.2em solid #fff;
}

h1 {
    font-size: 1.75rem!important;
    font-weight: 700!important;
    letter-spacing: 0.01em;
    padding: 2.5rem 0 0 0;
    // text-shadow: 0.022em 0.022em 0.022em #111;
    color: #fff;
}

</style>

Кстати, я также использую Gridsome ... так что, если есть еще простой способ доступа к данным страницы через GraphQL, для этой цели я тоже могу его использовать. Спасибо за любую помощь!

1 Ответ

1 голос
/ 08 мая 2020

Итак, мне просто нужно добавить ключевое слово /deep/ к родительскому CSS вот так: 

/deep/ header::before {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../assets/mockphoto.jpg')
            no-repeat left top,
        linear-gradient(#4e4376, #2b5876);
}

Docs: https://vue-loader.vuejs.org/guide/scoped-css.html#deep -selectors

...