ZeenSlideToggle

Компонент ZeenSlideToggle создает скрывающий и раскрывающие поле с внутренним контентом. Принимает в себя текст и еще один необязательный слот с заголовком

Примеры:

• Текст Текст Текст

  Текст Текст Текст

  Текст Текст Текст

  Текст Текст Текст

  Текст Текст Текст

props

Название	Тип	Обязательный	По умолчанию	Описание
open	Boolean	-	false	открыт/закрыт toogle
duration	Number	-	500	Время анимации
tag	String	-	div	html тег
closedHeight	Number	-	0	Высота в закрытом состоянии

Source Code - исходный код компонента

<template lang="pug">
  component(:style="style" ref="container" :is="tag" @transitionend="handleTransition")
    slot
</template>

<script>
export default {
  name: 'UiSlideToggle',
  props: {
    open: Boolean,
    duration: {
      type: Number,
      default: 500,
    },
    tag: {
      type: String,
      default: 'div',
    },
    closedHeight: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      scrollHeight: 0,
      doneOpenTransition: false,
      innerOpen: this.open,
    }
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  updated() {
    this.getHeight()
  },
  destroyed() {
    window.removeEventListener('resize', this.getHeight)
  },
  methods: {
    getHeight() {
      const {container} = this.$refs
      this.scrollHeight = container.scrollHeight
    },
    handleTransition() {
      if (this.innerOpen) {
        this.doneOpenTransition = true
      }
    },
  },
  computed: {
    style() {
      if (this.innerOpen && this.doneOpenTransition) return null
      const heightSize = this.innerOpen ? this.scrollHeight + 1 : this.closedHeight
      return {
        overflow: 'hidden',
        transitionProperty: 'height',
        height: `${heightSize}px`,
        transitionDuration: `${this.duration}ms`,
      }
    },
  },
  watch: {
    open(bool) {
      if (!bool) {
        this.getHeight()
        this.doneOpenTransition = false
        this.$nextTick().then(() => {
          this.innerOpen = false
        })
      } else {
        this.innerOpen = true
      }
    },
  },
}
</script>