|
|
<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>
|