vue-simple-collapse
Install
npm i vue-simple-collapse --save
Use
<template> <div> <div class="header">Color</div> <vue-collapse :initCount="initCount" :list="list"> <template slot-scope="{item, index}"> <div class="item"> <span :style="{ background: item.hex }"></span>{{ item.name }} </div> </template> </vue-collapse> </div></template><script>require('vue-simple-collapse/dist/index.css')import VueCollapse from 'vue-simple-collapse' export default { components: { VueCollapse }, data: function () { return { list: [ { name: 'Yellow', hex: '#FFFF00'}, { name: 'CORAL', hex: '#FF7F50'}, { name: 'TOMATO', hex: '#FF6347'}, { name: 'BLACK', hex: '#000000'}, { name: 'BLUE', hex: '#0000FF'}, { name: 'PINK', hex: '#FFC0CB'}, { name: 'GREEN', hex: '#008000'}, { name: 'WHITE', hex: '#FFFFFF'}, { name: 'RED', hex: '#CD5C5C'}, { name: 'SNOW', hex: '#FFFAFA'}, { name: 'INDIGO', hex: '#4B0082'} ], initCount: 5 // Default display 6 count items, please set it if you need display more or less count. } }}</script>
Demo