# Collapse 折叠面板

通过折叠面板收纳内容区域

# 基础用法

点击展开面板，各个面板内容互不影响

更快 1

更好 2

更easy 3

使用<mist-collapse>组件包裹<mist-collapse-item>组件，title传入需要显示的文本

<mist-collapse v-model="activeTitle" @change="handleChange">
  <mist-collapse-item title="更快 1">
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  </mist-collapse-item>
  <mist-collapse-item title="更好 2">
    <div>aliquam ipsa repellat aut fugit quisquam id. Officia, totam amet.</div>
    <div>aliquam ipsa repellat aut fugit quisquam id. Officia, totam amet.</div>
  </mist-collapse-item>
  <mist-collapse-item title="更easy 3">
    <div>aliquam ipsa repellat aut Lorem ipsum dolor sit amet</div>
    <div>aliquam ipsa repellat aut Lorem ipsum dolor sit amet</div>
  </mist-collapse-item>
</mist-collapse>
<script>
  export default {
    data(){
      return{
        activeTitle: "更快 1",
      }
    },
    methods:{
      handleChange(val) {
        console.log(val);
      },
    },
  }
</script>

Copy

← Badge 标记 Rate 评分 →