简单可配置的Vue手风琴组件/插件（vue-simple-accordion）

 website 下载

介绍

vue-simple-accordion是一个简单的Vue手风琴组件，可让您在Vue.js应用程序中创建完全可配置的手风琴组件。

使用方法

1.将组件导入到Vue.js应用中。

// import components
import {
  VsaList,
  VsaItem,
  VsaHeading,
  VsaContent,
  VsaIcon
} from 'vue-simple-accordion';

// import stylesheet
import 'vue-simple-accordion/dist/vue-simple-accordion.css';

// register components
export default {
  components: {
    VsaList,
    VsaItem,
    VsaHeading,
    VsaContent,
    VsaIcon
  }
}

2.创建一个基本的手风琴组件，如下所示：

<vsa-list>
  <vsa-item>
    <vsa-heading>
      Accordion Heading
    </vsa-heading>
    <vsa-content>
      Accordiong Panel
    </vsa-content>
  </vsa-item>
</vsa-list>

3. 配置选项。

tags: {
  type: Object,
  required: false,
  default: {
    list: "dl",
    list__item: "div",
    item__heading: "dt",
    heading__content: "span",
    heading__icon: "span",
    item__content: "dd"
  }
},
transition: {
  type: String,
  required: false,
  default: undefined // vsa-collapse. 
},
initActive: {
  type: Boolean,
  required: false,
  default: undefined
},
forceActive: {
  type: Boolean,
  required: false,
  default: undefined
},
autoCollapse: {
  type: Boolean,
  required: false,
  default: undefined
},
roles: {
  type: Object,
  required: false,
  default: {
    presentation: false,
    heading: false,
    region: true
  }
},
navigation: {
  type: Boolean,
  required: false,
  default: undefined
}