折叠面板 Collapse

基本

  1. <za-collapse @change="onChange">
  2.   <za-collapse-item title="单行文本" item-key="0">
  3.     <div>我是50元套餐内容</div>
  4.     <div>我是50元套餐内容</div>
  5.     <div>我是50元套餐内容</div>
  6.     <div>我是50元套餐内容</div>
  7.   </za-collapse-item>
  8. </za-collapse>
  9. <script>
  10.   export default {
  11.     methods: {
  12.       onChange(n) {
  13.         console.log(n)
  14.       }
  15.     }
  16.   }
  17. </script>

手风琴模式

<za-collapse animated default-active-key="a">
  <za-collapse-item title="单行文本" item-key="a">
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
  </za-collapse-item>
  <za-collapse-item title="单行文本" item-key="b">
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
  </za-collapse-item>
  <za-collapse-item title="单行文本" item-key="c">
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
  </za-collapse-item>
</za-collapse>

默认展开项

<za-collapse multiple animated :default-active-key="['a']">
  <za-collapse-item title="单行文本" item-key="a">
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
  </za-collapse-item>
  <za-collapse-item title="单行文本" item-key="b">
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
  </za-collapse-item>
</za-collapse>

禁用子项

<za-collapse multiple animated :default-active-key="['a']">
  <za-collapse-item title="单行文本" item-key="a" disabled>
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
  </za-collapse-item>
  <za-collapse-item title="单行文本" item-key="b">
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
    <div>我是50元套餐内容</div>
  </za-collapse-item>
</za-collapse>

Vue Script

<script name="vue">
export default {
  data() {
    return {
      activeKey: ['1', '2']
    }
  },
  created() {
    setTimeout(() => {
        this.activeKey = ['1']
    }, 2000);
  },
  methods: {
    onChange(n){
      console.log(n);
    },
  },
};
</script>

Collapse Attributes

属性类型默认值可选值／参数说明
default-active-keynumber string Array< number string >初始展开项
active-keynumber string Array < number string >当前展开项
multiplebooleanfalse是否允许打开多项
animatedbooleanfalse是否添加展开动画

CollapseItem Attributes

属性类型默认值可选值／参数说明
item-keystringcollapseItem 唯一标示 对应 activeKey
titlestring标题的文案
disabledbooleanfalse是否禁用

Collapse Events

事件名称说明回调参数
change当 Collapse 切换时触发的事件返回切换的 activeKey

CollapseItem Events

事件名称说明回调参数
item-change当 CollapseItem 切换时触发的事件返回 itemKey

Collapse 折叠面板 - 图1