dropdown.vue

<template>
  <div
    v-click-outside="clickOutside"
    :class="[
      'day-month-dropdown', {
        'day-month-dropdown--opened': isOpened
      }]"
  >
    <btn
      ref="dropdownBtnRef"
      class="day-month-dropdown__btn"
      @click="handleOpen(!isOpened)"
    >
      Число
      <icon
        class="day-month-dropdown__icon-arrow"
        icon-name="arrow-2"
      />
    </btn>
    <div
      v-if="isOpened"
      class="day-month-dropdown__list"
    >
      <div
        v-bar
      >
        <div>
          <btn class="day-month-dropdown__list-item">
            1
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            1
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            1
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            1
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            1
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            1
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            1
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            1
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            1
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            1
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            1
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            1
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            1
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            1
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            1
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
          <btn class="day-month-dropdown__list-item">
            1
          </btn>
          <btn class="day-month-dropdown__list-item">
            2
          </btn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Btn from '@/common-components/btn'
import Icon from '@/common-components/icon'

export default {
  name: 'day-month-dropdown',
  components: {
    Btn,
    Icon
  },
  data () {
    return {
      isOpened: false
    }
  },
  methods: {
    handleOpen (state) {
      this.isOpened = state
    },
    clickOutside (event) {
      if (event.target === this.$refs.dropdownBtnRef) {
        return
      }

      this.handleOpen(false)
    }
  }
}
</script>

<style src="./style.scss" lang="scss" />