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

这是一个简单的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.创建一个基本的手风琴组件，如下所示：

Accordion Heading

Accordiong Panel

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

}