ShowEasyFrontEnd/FrontEnd/components/home/Block.vue

<template>
  <div class="block">
    <v-container class="main-container">
      <v-row class="mx-0 mb-7 mt-4 d-flex justify-space-between pr-3">
        <v-card flat class="primary--text text-h4">
          {{ title }}
        </v-card>
        <div class="d-flex flex-row mr-5">
          <v-card
            flat
            class="arrow mr-10"
            v-if="arrow"
            v-show="carousel != 0"
            @click="leftArrowClick"
          >
            <v-img
              max-width="20"
              max-height="20"
              contain
              :src="require('@/assets/svg/left-arrow.svg')"
            ></v-img>
          </v-card>
          <v-card
            flat
            v-if="arrow"
            @click="rightArrowClick"
            :class="
              carousel == carouselPagesNum - 1 ? 'disable-arrow' : 'arrow'
            "
          >
            <v-img
              max-width="20"
              max-height="20"
              contain
              :src="
                carousel == carouselPagesNum - 1
                  ? require('@/assets/svg/disable-right-arrow.svg')
                  : require('@/assets/svg/right-arrow.svg')
              "
            ></v-img>
          </v-card>
        </div>
      </v-row>
      <v-row class="mx-0">
        <slot></slot>
      </v-row>
    </v-container>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
      },
      arrow: {
        type: Boolean,
      },
      carousel: {
        type: Number,
      },
      carouselPagesNum: {
        type: Number,
      },
    },
    data() {
      return {
        width: undefined,
      };
    },
    created() {
      if (process.client) {
        this.width = window.innerWidth;
      }
    },
    methods: {
      onResize() {
        if (process.client) {
          this.width = window.innerWidth;
        }
      },
      rightArrowClick() {
        this.$emit("rightArrowOnClick", this.title);
      },
      leftArrowClick() {
        this.$emit("leftArrowOnClick", this.title);
      },
    },
    computed: {
      windowWidth() {
        if (process.client) {
          this.width = window.innerWidth;
        }
        return this.width;
      },
    },
    mounted() {
      this.$nextTick(() => {
        window.addEventListener("resize", this.onResize);
      });
    },
    beforeDestroy() {
      window.removeEventListener("resize", this.onResize);
    },
  };
</script>

<style lang="scss" scoped></style>