NUXT_FRONTEND/components/Header/News/List.vue

<template>
  <div class="header-news">
    <v-row v-if="loading" dense >
      <v-col cols="3" v-for="n in 4" :key="n">
        <v-skeleton-loader
          max-height="141"
          class="mx-auto custom-skeleton-story"
          type="image"
        ></v-skeleton-loader>
      </v-col>
    </v-row>
    <div class="header-news__wrapper">
      <div class="header-news__slider">
        <div class="header-news-slider js-slider-h-news" >
          <client-only>
            <!-- TODO #slick сторис : переделать сортировку -->
          <VueSlickCarousel
            v-if="stories.length"
            class="header-news-slider__list"
            adaptiveHeight
            :arrows="true"
            :slidesToShow="4"
                :draggable="false"
                :touchMove="false"
            :responsive="[{
              breakpoint: 1024,
              settings: {
                draggable: true,
                touchMove: true,
                slidesToScroll: 4
              }
            }]"
          >
            <div
              v-for="(storie, i) in stories"
              :key="storie.alias"
              class="header-news-slider__item"
            >
              <div
                class="header-news-slider__item-link"
              @click="toggleModal(i)"
                >
              >
                <div
                  class="header-news-slider__item-img"
                  :style="
                    'background-image: url(' + (storie.preview_image ? storie.preview_image.url : '') + ')'
                  "
                ></div>
                <div class="header-news-slider__title" v-html=" storie.title"></div>
              </div>

            </div>

            <template #prevArrow="arrowOption">
              <button
                class="
                  button button_h-slider button_h-slider-prev
                  js-slider-next
                  slick-arrow
                "
                style=""
              >
                <BaseIcon :name="'h-slider-prev'" clear />
              </button>
            </template>
            <template #nextArrow="arrowOption">
              <button
                class="
                  button button_h-slider button_h-slider-next
                  js-slider-next
                  slick-arrow
                "
                style=""
              >
                <BaseIcon :name="'h-slider-next'" clear />
              </button>
            </template>
          </VueSlickCarousel></client-only>
        </div>
      </div>
      <modal :classes="'storie__modal'" scrollable name="storie" :v-scroll-lock="modalOpen"> <HeaderNewsStorie :num="index" /> </modal>
    </div>
  </div>
</template>
<script>
import "vue-slick-carousel/dist/vue-slick-carousel.css";
import VueSlickCarousel from "vue-slick-carousel";
import { mapGetters } from "vuex"
export default {
  components: {
    VueSlickCarousel,
  },
  data() {
    return {
      loading: true,
      modalOpen: false,
      index: 0,
    };
  },
  mounted() {
    this.loading = false
  },
  async fetch() {
    await this.$store.dispatch("modules/news/setStories")
  },
  methods: {
    toggleModal(params) {
      this.index = params
      this.$modal.show('storie')
      this.modalOpen = !this.modalOpen
    },
  },
  computed:{
    ...mapGetters({
      stories: "modules/news/stories",
    })
  },
  beforeRouteUpdate(to, from, next) {
    this.$modal.hide('storie')
    next()
  },
 async asyncData({ $axios }) {
     const stories = $axios
       .$get("news/story")
       .then((res) => {
         return res.data;
       })
       .catch((err) => {
         console.error('Error load story');
       });
     return { stories };
   }

};
</script>

<style lang="less">
.header-news {
  &__wrapper {
    display: flex;
  }
}
.header-news-slider__item-link {
  height: 100%;
}
.header-news-slider__item {
  max-width: 131px;
  height: 141px;
  margin-right: 9px;
}
.header-news-slider__title {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 5; /* number of lines to show */
   /*line-height: 16px;*/        /* fallback */
   max-height: calc(16px * 6);       /* fallback */
   box-sizing: content-box;
   padding-bottom: 0;
   margin-bottom: 8px;
  font-size: 14px;
  line-height: 120%;
}
.storie {
  &__modal {
    height: 100vh !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
  }
}
.custom-skeleton-story {
  width: 131px;
  @media screen and (min-width:768px) and (max-width:1300px) {
    width: 125px;
  }
  @media screen and (max-width:600px) {
    width: 80px;
  }
  @media screen and (max-width:360px) {
    width: 70px;
  }
}
</style>