Vue的手风琴组件--优雅的展示图片以及文字的方式

这是今天看到的一个不错的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组件的网站