Collapse 折叠面板

提供 wx-collapse 和 wx-collapse-item 两个组件。

基本用法

<wx-collapse v-model="c1">
  <wx-collapse-item title="美观" name="c1">
    <div class="box">遵循WeUI的视觉设计规范，简洁美观，拥有良好的移动交互体验，开发者无需过多关注UI设计</div>
  </wx-collapse-item>
  <wx-collapse-item title="易用">
    <div class="box">尽量少的属性和事件来构建组件，并保持灵活度和规范性，使得组件更简单易用</div>
  </wx-collapse-item>
  <wx-collapse-item title="高效">
    <div class="box">提供整套的移动应用开发框架和文档教程，帮助开发者快速开发出自己的移动应用</div>
  </wx-collapse-item>
</wx-collapse>

<script>
export default {
  data() {
    return {
      c1: ["c1"]
    };
  }
};
</script>

<style>
.box {
    font-size: 14px;
    color: #333;
}
</style>

手风琴模式

<wx-collapse accordion>
  <wx-collapse-item :title="`标题-${i}`" v-for="i in 4" :key="i">
    <div class="box">内容{{i}}</div>
  </wx-collapse-item>
</wx-collapse>

自定义标题

<wx-collapse>
  <wx-collapse-item>
    <template #header>
      <wx-flex>
        <img :src="require(`../assets/sticky.png`)" alt />
        <wx-flex-item tag="p">标题</wx-flex-item>
      </wx-flex>
    </template>
    <div class="box">内容</div>
  </wx-collapse-item>
</wx-collapse>

Collapse Attributes

参数	说明	类型	可选值	默认值
v-model/value	绑定值，即展开面板项name集合	String/Number/Array	-	-
accordion	是否启用手风琴模式	Boolean	-	false

Collapse-item Attributes

参数	说明	类型	可选值	默认值
title	面板项标题	String	-	-
name	面板项唯一标识名称，用于面板项绑定	String	-	唯一随机6位数字字母组合唯一字符串

折叠面板