vue-expand-panel

Vue-expand-panel

Expand panel component for Vue.

Example

查看在线DEMO

Install

NPM

npm install vue-expand-panel --save

Mount

mount with global

import Vue from 'vue'
import VueExpandPanel from 'vue-expand-panel'

// import styles
import 'vue-expand-panel/dist/vue-expand-panel.css'

// mount with global
Vue.use(VueExpandPanel)

mount with component

import { expandPanel } from 'vue-expand-panel'
// import styles
import 'vue-expand-panel/dist/vue-expand-panel.css'

export default {
  components: {
    expandPanel
  }
}

Component

<template>
  <div class="vue-expand-panel">
    <ul>
      <li v-for="(item, index) in expandList" :key="index">
        <expand-panel :title="item.title">
          <div class="section-content" v-for="(data, key) in item.dataList" :key="key">
            <div class="col-txt col-1">{{ data.col_1 }}</div>
            <div class="col-txt col-2">{{ data.col_2 }}</div>
            <div class="col-txt col-3">{{ data.col_3 }}</div>
          </div>
        </expand-panel>
      </li>
    </ul>
  </div>
</template>

Options

Author

TimRChen