@2alheure/vue-accordion 中文文档教程

Question

Vue JS Accordion

一个简单的 Vue JS 手风琴组件。
此组件与 Vue 3 兼容。

• Vue JS Accordion
• Installation
• Usage
  • Simple usage example
• Props
• Events

Installation

首先，运行 npm install @2alheure/vue-accordion。
然后使用 import Accordion from "@2alheure/vue-accordion"; 导入它。

Usage

Simple usage example

<Accordion :headerStyle="headerStyle" :contentStyle="contentStyle">
  <template #header">
    Your accordion title. Can also be <strong>HTML</strong>.
  </template>

  Your accordion content. It can be simple text like this.
  <p>It can also be HTML.</p>
</Accordion>

<script>
  import Accordion from "@2alheure/vue-accordion";

  export default {
    components: {
      Accordion
    },
    data() {
      return {
        headerStyle: 'background-color: white;',
        contentStyle: {
          color: 'red',
          fontSize: '42px'
        }
      }
    }
  };
</script>

Props

Name	Type	Default value	Description
opened	Boolean	false	Whether the content should be displayed when loaded.
symbolOpened	String	∨	The symbol to use for the opened accordion. (Can be HTML.)
symbolClosed	String	>	The symbol to use for the closed accordion. (Can be HTML.)
headerStyle	String / Object	padding: .5rem;	The style for the header.
symbolStyle	String / Object	font-size: 1.5rem; font-weight: 700; vertical-align: middle;	The style for the symbol.
contentStyle	String / Object	width: 98%; margin: auto; padding: .5rem;	The style for the content.
accordionClass	String / Object	null	The classes for the accordion.
headerClass	String / Object	null	The classes for the header.
symbolClass	String / Object	null	The classes for the symbol.
contentClass	String / Object	null	The classes for the content.

Events

Name	Description
open	Emitted each time the accordion is opened.
close	Emitted each time the accordion is closed.
switch	Emitted each time the accordion switches between open and close.