Vue-disclosure NPM

Vue Disclosure

Overview

Accordion plugin for Vue 2.

Installation

Step 1

$ yarn add vue-disclosure

Step 2

import Vue from 'vue'
import VueDisclosure from 'vue-disclosure'


Vue.use(VueDisclosure)

Usage

Basic

<template>
  <disclosure-toggler :options="options">The item opens and closes by clicking.</disclosure-toggler>
  <disclosure-content>
    <div>Accordion Item</div>
  </disclosure-content>
</template>

<script>
  export default {
    data () {
      options: {
        active: true, // default true
        ease: 'ease',
        duration: 600,
        responsive: [
          {
            breakpoint: 768,
            options: {
              active: false
            }
          }
        ],
      }
    }
  }
</script>

Use v-for

<template>
  <disclosure-toggler>The item opens and closes by clicking.</disclosure-toggler>
  <disclosure-content>
    <div v-for="item in items">
      <p>{{ item }}</p>
    </div>
  </disclosure-content>
</template>

<script>
  export default {
    data () {
      items: ['foo', 'bar', 'baz']
    },
    mounted () {
      this.$nextTick(() => {
        this.$disclosure.reload()
      })
    }
  }
</script>