这是本日看到的一个不错的vue组件。觉得用来做首页图片和笔墨的展示，或者是宣扬网站对产物的差别特征的展示都是一个很活泼的展示要领。vue-accordion的设想作风和轮播图相似。它能够支撑用户自定义款式类。

装置

经由过程NPM装置

npm install vue-accordion

将它引入到你的运用中

import Vue from 'vue'
import {vueAccordion} from 'vue-accordion'

Vue.component('vue-accordion', vueAccordion)

Browser global

<script scr="path/to/vue.js"></script>
<script src="path/to/dist/vue-accordion.js"></script>

注册组件

  Vue.component('vue-accordion', vueAccordion)
  
  var vm = new Vue({
    ...
  });

运用组件

这是一个简朴运用的例子

<vue-accordion :items="items" :accordionClass="acClass" :styles="styles"></vue-accordion>

当accordion组件被衬着以后，它将天生一个如许的构造

<div class="vue-accordion">
  <ul>
    <!-- First menu item-->
    <li>
      <a>
        <h2>...</h2>
        <p>...</p>
      </a>
    </li>
    <!-- Second menu item-->
    <li>
      <a>
        <h2>...</h2>
        <p>...</p>
      </a>
    </li>
    ...
  </ul>
</div>

CSS将基于这个构造

.vue-accordion {
  ...
}

.vue-accordion ul {
  ...
}

...

.vue-accordion ul li a h2 {
  ...
}

假如须要修正款式，能够看下’accordionClass’和’styles’这两个参数设置

轮子工场–一个分享优异的vue,angular组件的网站