折叠面板（Collapse）

4.6 折叠面板（Collapse）

卡片容器，可承载文字、列表、图片、段落等。

#基础样式

多个折叠面板排列时，允许展开所有面板。

#手风琴

当多个折叠面板排列时，仅允许展开一个面板

#自定义

可自定义单元格高度、描述内容高度、选项文案

#dof-collapse 组件

#实例

#基础用法

<template>
  <div class="dof-demo">
    <dof-minibar
      title="折叠面板"
      :isImage="true"
      :left-button="leftButton"
      @dofMinibarLeftButtonClicked="back"
      @dofMinibarRightButtonClicked="minibarRightButtonClick"
    ></dof-minibar>
    <scroller class="column-center-top">
      <div class="example-item">
        <div class="title-item">
          <div>
            <text class="a-title">基础样式</text>
          </div>
          <div><text class="sub-title">多个折叠面板排列时，允许展开所有面板</text></div>
        </div>
        <dof-collapse @change="onChange_01" :activeNames="activeNames_01">
          <dof-collapse-item name="1" :collapsed="collapsed">
            <div slot="title"><text class="change-title">单元格1</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text"
                >产品信息架构，帮助用户高效、轻松地使用产品，给用户带来统一流畅的使用体验。</text
              >
              <div class="botton-line"></div>
              <text class="collapse-content-text"
                >产品信息架构、界面、任务流程、操作方式、视觉风格、用户情感绑定、品牌感等元素在整个产品系统中保持一致，帮助用户高效、轻松地使用产品，给用户带来统一流畅的使用体验。</text
              >
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="2">
            <div slot="title"><text class="change-title">单元格2</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text"
                >产品信息架构、界面、任务流程、操作方式、视觉风格、用户情感绑定、品牌感等元素在整个产品系统中保持一致，帮助用户高效、轻松地使用产品，给用户带来统一流畅的使用体验。</text
              >
              <div class="botton-line"></div>
              <text class="collapse-content-text">轻松地使用产品，给用户带来统一流畅的使用体验。</text>
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="3">
            <div slot="title"><text class="change-title">单元格3</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text"
                >产品信息架构，帮助用户高效、轻松地使用产品，给用户带来统一流畅的使用体验。</text
              >
              <div class="botton-line"></div>
              <text class="collapse-content-text"
                >产品信息架构、界面、任务流程、操作方式、视觉风格、用户情感绑定、品牌感等元素在整个产品系统中保持一致，帮助用户高效、轻松地使用产品，给用户带来统一流畅的使用体验。</text
              >
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="4">
            <div slot="title"><text class="change-title">单元格4</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text"
                >产品信息架构、界面、任务流程、操作方式、视觉风格、用户情感绑定、品牌感等元素在整个产品系统中保持一致，帮助用户高效、轻松地使用产品，给用户带来统一流畅的使用体验。</text
              >
              <div class="botton-line"></div>
              <text class="collapse-content-text">轻松地使用产品，给用户带来统一流畅的使用体验。</text>
            </div>
          </dof-collapse-item>
        </dof-collapse>
      </div>

      <div class="example-item">
        <div class="title-item">
          <div>
            <text class="a-title">手风琴</text>
          </div>
          <div><text class="sub-title">当多个折叠面板排列时，仅允许展开一个面板</text></div>
        </div>
        <dof-collapse @change="onChange_02" :accordion="accordion" :activeNames="activeNames_02">
          <dof-collapse-item name="1" :collapsed="collapsed">
            <div slot="title"><text class="change-title">单元格1</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text"
                >产品信息架构，帮助用户高效、轻松地使用产品，给用户带来统一流畅的使用体验。</text
              >
              <div class="botton-line"></div>
              <text class="collapse-content-text"
                >产品信息架构、界面、任务流程、操作方式、视觉风格、用户情感绑定、品牌感等元素在整个产品系统中保持一致，帮助用户高效、轻松地使用产品，给用户带来统一流畅的使用体验。</text
              >
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="2">
            <div slot="title"><text class="change-title">单元格2</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text"
                >产品信息架构、界面、任务流程、操作方式、视觉风格、用户情感绑定、品牌感等元素在整个产品系统中保持一致，帮助用户高效、轻松地使用产品，给用户带来统一流畅的使用体验。</text
              >
              <div class="botton-line"></div>
              <text class="collapse-content-text">轻松地使用产品，给用户带来统一流畅的使用体验。</text>
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="3">
            <div slot="title"><text class="change-title">单元格3</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text"
                >产品信息架构，帮助用户高效、轻松地使用产品，给用户带来统一流畅的使用体验。</text
              >
              <div class="botton-line"></div>
              <text class="collapse-content-text"
                >产品信息架构、界面、任务流程、操作方式、视觉风格、用户情感绑定、品牌感等元素在整个产品系统中保持一致，帮助用户高效、轻松地使用产品，给用户带来统一流畅的使用体验。</text
              >
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="4">
            <div slot="title"><text class="change-title">单元格4</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text"
                >产品信息架构、界面、任务流程、操作方式、视觉风格、用户情感绑定、品牌感等元素在整个产品系统中保持一致，帮助用户高效、轻松地使用产品，给用户带来统一流畅的使用体验。</text
              >
              <div class="botton-line"></div>
              <text class="collapse-content-text">轻松地使用产品，给用户带来统一流畅的使用体验。</text>
            </div>
          </dof-collapse-item>
        </dof-collapse>
      </div>

      <div class="example-item">
        <div class="title-item">
          <div><text class="a-title">自定义</text></div>
          <div><text class="sub-title">可自定义单元格高度、描述内容高度、选项文案</text></div>
        </div>
        <dof-collapse :activeNames="activeNames_03">
          <dof-collapse-item name="1" :collapsed="collapsed">
            <div slot="title"><text class="change-title">自定义标题</text></div>
            <div slot="desc"><text class="desc-text">内容1</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text"
                >控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</text
              >
              <div class="botton-line"></div>
              <text class="collapse-content-text">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</text>
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="2">
            <div slot="title"><text class="change-title">标题2</text></div>
            <div slot="desc"><text class="desc-text">内容2</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text"
                >控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</text
              >
              <div class="botton-line"></div>
              <text class="collapse-content-text">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</text>
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="3">
            <div slot="title"><text class="change-title">标题3</text></div>
            <div slot="desc"><text class="desc-text">内容3</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text"
                >控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</text
              >
              <div class="botton-line"></div>
              <text class="collapse-content-text">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</text>
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="4">
            <div slot="title"><text class="change-title">标题4</text></div>
            <div slot="desc"><text class="desc-text">内容4</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text"
                >控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</text
              >
              <div class="botton-line"></div>
              <text class="collapse-content-text">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</text>
            </div>
          </dof-collapse-item>
        </dof-collapse>
      </div>

      <div class="example-item">
        <div class="title-item">
          <div><text class="a-title">列表示例 1</text></div>
        </div>
        <dof-collapse :activeNames="activeNames_04">
          <dof-collapse-item name="1" :collapsed="collapsed">
            <div slot="title"><text class="change-title">上门/远程费</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text">高空作业</text>
              <div class="botton-line"></div>
              <text class="collapse-content-text">无电梯</text>
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="2">
            <div slot="title"><text class="change-title">特殊环境</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text">高空作业</text>
              <div class="botton-line"></div>
              <text class="collapse-content-text">无电梯</text>
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="3">
            <div slot="title"><text class="change-title">辅材费</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text">高空作业</text>
              <div class="botton-line"></div>
              <text class="collapse-content-text">无电梯</text>
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="4">
            <div slot="title"><text class="change-title">便民服务</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text">高空作业</text>
              <div class="botton-line"></div>
              <text class="collapse-content-text">无电梯</text>
            </div>
          </dof-collapse-item>
        </dof-collapse>
      </div>

      <div class="example-item">
        <div class="title-item">
          <div><text class="a-title">列表示例 2</text></div>
        </div>
        <dof-collapse :activeNames="activeNames_05">
          <dof-collapse-item name="1" :collapsed="collapsed">
            <div slot="title"><text class="change-title">是否环境湿度较大？</text></div>
            <div class="collapse-content">
              <div class="collapse-content-text">
                <text class="collapse-content-text-title">解决方案描述：</text>
                <text class="collapse-content-text-desc">若风速过低，请适当提高风速</text>
              </div>
              <div class="botton-line"></div>
              <div class="collapse-content-text">
                <text class="collapse-content-text-title">故障原因：</text>
                <text class="collapse-content-text-desc">可能是风速太低，导致产生水珠</text>
              </div>
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="2">
            <div slot="title"><text class="change-title">是否风速过低？</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text">高空作业</text>
              <div class="botton-line"></div>
              <text class="collapse-content-text">无电梯</text>
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="3">
            <div slot="title"><text class="change-title">上门/远程费</text></div>
            <div class="collapse-content">
              <div class="collapse-content-text">
                <text class="collapse-content-text-title">解决方案描述：</text>
                <text class="collapse-content-text-desc">若风速过低，请适当提高风速</text>
              </div>
              <div class="botton-line"></div>
              <div class="collapse-content-text">
                <text class="collapse-content-text-title">故障原因：</text>
                <text class="collapse-content-text-desc">可能是风速太低，导致产生水珠</text>
              </div>
            </div>
          </dof-collapse-item>
        </dof-collapse>
      </div>

      <div class="example-item">
        <div class="title-item">
          <div><text class="a-title">列表示例 3</text></div>
        </div>
        <dof-collapse :activeNames="activeNames_06">
          <dof-collapse-item name="1" :collapsed="collapsed">
            <div slot="title"><text class="change-title">安装/更换水龙头</text></div>
            <div slot="desc"><text class="desc-text red-text">50-150元</text></div>
            <div class="collapse-content">
              <div class="collapse-content-text">
                <text class="collapse-content-text-title">解决方案描述：</text>
                <text class="collapse-content-text-desc">若风速过低，请适当提高风速</text>
              </div>
              <div class="botton-line"></div>
              <div class="collapse-content-text">
                <text class="collapse-content-text-title">故障原因：</text>
                <text class="collapse-content-text-desc">可能是风速太低，导致产生水珠</text>
              </div>
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="2">
            <div slot="title"><text class="change-title">安装/更换水管</text></div>
            <div slot="desc"><text class="desc-text red-text">150元</text></div>
            <div class="collapse-content-box">
              <div class="collapse-content border-radius-16">
                <div class="check-content-box">
                  <div class="check-content">
                    <div class="check-content-left">
                      <text class="check-content-title">浴室柜组合 拆除</text>
                      <text class="check-content-desc">非保护性拆除、不含清运</text>
                      <text class="check-content-title">150元</text>
                    </div>
                    <dof-checkbox-list
                      :list="list"
                      :needShowTopBorder="false"
                      style="background-color: #f9f9f9;"
                      @dofCheckBoxListChecked="CheckBoxClicked"
                    >
                    </dof-checkbox-list>
                  </div>
                </div>
              </div>
              <div class="collapse-content border-radius-16">
                <div class="check-content-box">
                  <div class="check-content">
                    <div class="check-content-left">
                      <text class="check-content-title"
                        >浴缸拆除文案文案浴缸拆除文案文案浴缸拆除文案文案浴缸拆除文案文案</text
                      >
                      <text class="check-content-desc">非保护性拆除，不含清运；不包含拆除砖砌裙边；内嵌式浴缸除外</text>
                      <text class="check-content-title">150元</text>
                    </div>
                    <dof-checkbox-list
                      :list="list"
                      :needShowTopBorder="false"
                      style="background-color: #f9f9f9;"
                      @dofCheckBoxListChecked="CheckBoxClicked"
                    >
                    </dof-checkbox-list>
                  </div>
                </div>
              </div>
              <div class="collapse-content border-radius-16">
                <div class="check-content-box">
                  <div class="check-content">
                    <div class="check-content-left">
                      <text class="check-content-title">浴缸拆除</text>
                      <text class="check-content-desc">非保护性拆除，不含清运；不包含拆除砖砌裙边；内嵌式浴缸除外</text>
                      <text class="check-content-title">150元</text>
                    </div>
                    <dof-checkbox-list
                      :list="list"
                      :needShowTopBorder="false"
                      style="background-color: #f9f9f9;"
                      @dofCheckBoxListChecked="CheckBoxClicked"
                    >
                    </dof-checkbox-list>
                  </div>
                </div>
              </div>
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="3">
            <div slot="title"><text class="change-title">卫浴拆除项目</text></div>
            <div slot="desc"><text class="desc-text red-text">100-150元</text></div>
            <div class="collapse-content">
              <div class="collapse-content-text">
                <text class="collapse-content-text-title">解决方案描述：</text>
                <text class="collapse-content-text-desc">若风速过低，请适当提高风速</text>
              </div>
              <div class="botton-line"></div>
              <div class="collapse-content-text">
                <text class="collapse-content-text-title">故障原因：</text>
                <text class="collapse-content-text-desc">可能是风速太低，导致产生水珠</text>
              </div>
            </div>
          </dof-collapse-item>
        </dof-collapse>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
.dof-demo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
}
.border-radius-16 {
  border-radius: 16px;
}
.collapse-content-box {
  padding: 32px;
  background-color: #ffffff;
}
.collapse-content {
  padding-left: 32px;
  background-color: #f9f9f9;
}
.collapse-content-text {
  line-height: 60px;
  font-size: 28px;
  color: #666666;
  padding: 30px 64px 30px 0;
}
.botton-line {
  border-bottom-color: #eeeeee;
  border-bottom-style: solid;
  border-bottom-width: 2px;
}
.title-item {
  padding: 40px 32px;
  background-color: #e5e5e8;
}
.a-title {
  font-size: 36px;
  color: #000000;
}
.sub-title {
  font-size: 28px;
  color: #666666;
  margin-top: 16px;
}
.change-title {
  height: 104px;
  line-height: 104px;
  font-size: 32px;
  color: #000000;
}
.collapse-content-text-title {
  font-size: 28px;
  color: #000000;
  margin-bottom: 16px;
}
.collapse-content-text-desc {
  font-size: 24px;
  color: #666666;
}
.desc-text {
  font-size: 28px;
}
.red-text {
  color: #fd4942;
}
.check-content-box {
  padding: 20px 0;
}
.check-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #f9f9f9;
}
.check-content-left {
  flex: 1;
}
.check-content-title {
  color: #333333;
  font-size: 28px;
  white-space: wrap;
  line-height: 36px;
}
.check-content-desc {
  color: #666666;
  font-size: 24px;
  line-height: 32px;
  margin-top: 10px;
  margin-bottom: 20px;
}
</style>
<script>
import { DofMinibar, DofCollapse, DofCollapseItem, DofCheckboxList } from 'dolphin-weex-ui'
const modal = weex.requireModule('modal')
export default {
  components: { DofMinibar, DofCollapse, DofCollapseItem, DofCheckboxList },
  data: () => ({
    accordion: true,
    collapsed: false,
    list: [1],
    activeNames_01: [1],
    activeNames_02: '1',
    activeNames_03: [1],
    activeNames_04: [1],
    activeNames_05: [1],
    activeNames_06: [1],
    leftButton: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_back@3x.png'
  }),

  created() {},
  methods: {
    minibarRightButtonClick() {},
    CheckBoxClicked(e) {
      console.log(e)
    },
    onChange_01(e) {
      this.activeNames_01 = e.name
      modal.toast({
        message: JSON.stringify(this.activeNames_01)
      })
    },
    onChange_02(e) {
      this.activeNames_02 = e.name
      modal.toast({
        message: this.activeNames_02
      })
    }
  }
}
</script>

#Api

Collapse Props

Prop	Type	Required	Default	Description
activeNames	`String	Array`	Y	Y
accordion	Boolean	Y	false	是否开启手风琴模式

Collapse Events

事件名称	说明	回调参数
change	折叠面板改变时触发	`e: String

CollapseItem Props

Prop	Type	Required	Default	Description
name	Number	Y	1	折叠面板唯一标识
collapsed	Boolean	Y	false	是否折叠，搭配activeNames使用