手风琴 Accordion

基本用法

手风琴 Accordion - 图1

  1. <template lang="html">
  2.     <main>
  3.       <div class="demo-hidden">
  4.         <za-panel>
  5.             <za-panel-header title="基本"></za-panel-header>
  6.             <za-panel-body>
  7.               <za-accordion @change='onChange'>
  8.                 <za-accordion-item title="50元套餐" ai-tag='0'>
  9.                   <div>我是50元套餐内容</div>
  10.                   <div>我是50元套餐内容</div>
  11.                   <div>我是50元套餐内容</div>
  12.                   <div>我是50元套餐内容</div>
  13.                 </za-accordion-item>
  14.                 <za-accordion-item title="100元套餐" ai-tag='1'>
  15.                   <div>我是100元套餐内容</div>
  16.                   <div>我是100元套餐内容</div>
  17.                   <div>我是100元套餐内容</div>
  18.                   <div>我是100元套餐内容</div>
  19.                 </za-accordion-item>
  20.                 <za-accordion-item title="200元套餐" ai-tag='2'>
  21.                   <div>我是200元套餐内容</div>
  22.                   <div>我是200元套餐内容</div>
  23.                   <div>我是200元套餐内容</div>
  24.                   <div>我是200元套餐内容</div>
  25.                 </za-accordion-item>
  26.               </za-accordion>
  27.             </za-panel-body>
  28.           </za-panel>
  30.           <za-panel>
  31.             <za-panel-header title="手风琴模式"></za-panel-header>
  32.             <za-panel-body>
  33.               <za-accordion :multiple='false' :default-active-tag="active">
  34.                 <za-accordion-item title="50元套餐" ai-tag='a'>
  35.                   <div>我是50元套餐内容</div>
  36.                   <div>我是50元套餐内容</div>
  37.                   <div>我是50元套餐内容</div>
  38.                   <div>我是50元套餐内容</div>
  39.                 </za-accordion-item>
  40.                 <za-accordion-item title="100元套餐" ai-tag='b'>
  41.                   <div>我是100元套餐内容</div>
  42.                   <div>我是100元套餐内容</div>
  43.                   <div>我是100元套餐内容</div>
  44.                   <div>我是100元套餐内容</div>
  45.                 </za-accordion-item>
  46.                 <za-accordion-item title="200元套餐" ai-tag='c'>
  47.                   <div>我是200元套餐内容</div>
  48.                   <div>我是200元套餐内容</div>
  49.                   <div>我是200元套餐内容</div>
  50.                   <div>我是200元套餐内容</div>
  51.                 </za-accordion-item>
  52.               </za-accordion>
  53.             </za-panel-body>
  54.           </za-panel>
  56.           <za-panel>
  57.             <za-panel-header title="默认展开项"></za-panel-header>
  58.             <za-panel-body>
  59.               <za-accordion :default-active-tag="active">
  60.                 <za-accordion-item title="50元套餐" ai-tag='a'>
  61.                   <div>我是50元套餐内容</div>
  62.                   <div>我是50元套餐内容</div>
  63.                   <div>我是50元套餐内容</div>
  64.                   <div>我是50元套餐内容</div>
  65.                 </za-accordion-item>
  66.                 <za-accordion-item title="100元套餐" ai-tag='b'>
  67.                   <div>我是100元套餐内容</div>
  68.                   <div>我是100元套餐内容</div>
  69.                   <div>我是100元套餐内容</div>
  70.                   <div>我是100元套餐内容</div>
  71.                 </za-accordion-item>
  72.                 <za-accordion-item title="200元套餐" ai-tag='c'>
  73.                   <div>我是200元套餐内容</div>
  74.                   <div>我是200元套餐内容</div>
  75.                   <div>我是200元套餐内容</div>
  76.                   <div>我是200元套餐内容</div>
  77.                 </za-accordion-item>
  78.               </za-accordion>
  79.             </za-panel-body>
  80.           </za-panel>
  82.           <za-panel>
  83.             <za-panel-header title="强制展开模式"></za-panel-header>
  84.             <za-panel-body>
  85.               <za-accordion open>
  86.                 <za-accordion-item title="50元套餐">
  87.                   <div>我是50元套餐内容</div>
  88.                   <div>我是50元套餐内容</div>
  89.                   <div>我是50元套餐内容</div>
  90.                   <div>我是50元套餐内容</div>
  91.                 </za-accordion-item>
  92.                 <za-accordion-item title="100元套餐">
  93.                   <div>我是100元套餐内容</div>
  94.                   <div>我是100元套餐内容</div>
  95.                   <div>我是100元套餐内容</div>
  96.                   <div>我是100元套餐内容</div>
  97.                 </za-accordion-item>
  98.                 <za-accordion-item title="200元套餐">
  99.                   <div>我是200元套餐内容</div>
  100.                   <div>我是200元套餐内容</div>
  101.                   <div>我是200元套餐内容</div>
  102.                   <div>我是200元套餐内容</div>
  103.                 </za-accordion-item>
  104.               </za-accordion>
  105.             </za-panel-body>
  106.           </za-panel>
  107.       </div>
  108.     </main>
  109. </template>
  110. <script>
  111. export default {
  112.   data() {
  113.     return {
  114.       active: ['a'],
  115.     }
  116.   },
  117.   methods: {
  118.     onChange(n){
  119.       console.log(n);
  120.     },
  121.   },
  122. };
  123. </script>

API

Accordion Attributes

属性类型默认值可选值／参数说明
prefixClsstringza-accordion类名前缀
defaultActiveTagarray默认展开的ai-tag数组
multiplebool是否手风琴模式
animatedboolfalse是否开启展开动画
openboolfalse强制默认展开

AccordionItem Attributes

属性类型默认值可选值／参数说明
ai-tagstringaccordionItem唯一标示
titlestring标题的文案

Accordion Events

事件名称说明回调参数
change当accordion切换时触发的事件返回切换的ai-tag