vue手风琴组件_Vue 2的Badger手风琴组件

vue手风琴组件

Vue-Badger手风琴 (vue-badger-accordion)

Badger-Accordion Component for Vue 2.0.

Vue 2.0的Badge-Accordion组件。

An accessible light weight, vanilla JavaScript accordion.

轻巧的香草JavaScript手风琴。

View demo 查看演示 Download Source 下载源

安装 (Installation)

安装套件 (Install package)

npm install vue-badger-accordion --save

建立 (Setup)

import {BadgerAccordion, BadgerAccordionItem} from 'vue-badger-accordion'

全球实施 (Implement globally)

Vue.component('BadgerAccordion', BadgerAccordion)
Vue.component('BadgerAccordionItem', BadgerAccordionItem)

本地实施 (Implement locally)

export default {
    components: {
        BadgerAccordion,
        BadgerAccordionItem
    }
}

例 (Example)

<badger-accordion>
    <badger-accordion-item>
        <template slot="header">First Accordion Header</template>    
        <template slot="content">First Accordion Content</template>  
    </badger-accordion-item>

    <badger-accordion-item>
        <template slot="header">Second Accordion Header</template>    
        <template slot="content">Second Accordion Content</template>  
    </badger-accordion-item>
</badger-accordion>

Note: You can replace the template-tag with all regular html-tags, just remember to add the slot-parameter.

注意：您可以使用所有常规html-tag替换template-tag，只需记住添加slot-parameter。

选件 (Options)

Options can be implemented by component property "option".

选项可以通过组件属性“选项”实现。

<badger-accordion :options="{...}">
    ...
</badger-accordion>

A list of available options could be found in the badger-accordion repository

可在-手风琴库中找到可用选项的列表

https://github.com/stuartjnelson/badger-accordion#options

https://github.com/stuartjnelson/badger-accordion#options

方法 (Methods)

All Methods of badger-accordion are also available. Just add a ref to you accordion and you can access them.

也可以使用所有的Methods手风琴方法。 只要向您的手风琴添加一个参考，您就可以访问它们。

<badger-accordion ref="myAccordion">

this.$refs.myAccordion.open(0);

翻译自: https://vuejsexamples.com/badger-accordion-component-for-vue-2/

vue手风琴组件