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

Vue的简单可配置手风琴组件 - vue-simple-accordion
插件名称 vue-simple-accordion
发布时间 2020年10月15日
插件作者 tkhquang

这是一个简单的Vue组件库,可让您在Vue.js应用程序中创建完全可配置的手风琴组件。

安装和下载:

# Yarn
$ yarn add vue-simple-accordion

# NPM
$ npm i vue-simple-accordion --save

基本用法:

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

// 导入组件
import {
  VsaList,
  VsaItem,
  VsaHeading,
  VsaContent,
  VsaIcon
} from 'vue-simple-accordion';

// 导入样式表
import 'vue-simple-accordion/dist/vue-simple-accordion.css';

// 注册组件
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.可用的 props 来配置手风琴组件。

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
}