伸缩框 avater 优化中

一个朴实无华的伸缩框

使用说明

简单引入

我是一个朴实无华的伸缩框

这是一段内容

这是一段内容

这是一段内容

这是一段内容

这是一段内容

展开代码

<vi-collapse title="我是一个朴实无华的伸缩框">
  <p>这是一段内容</p>
  <p>这是一段内容</p>
  <p>这是一段内容</p>
  <p>这是一段内容</p>
  <p>这是一段内容</p>
</vi-collapse>

自操控伸缩

你可以通过v-model绑定变量控制伸缩框伸缩状态

我是一个朴实无华的伸缩框

这是一段内容

这是一段内容

这是一段内容

这是一段内容

这是一段内容

展开代码

<vi-collapse title="我是一个朴实无华的伸缩框" v-model="open">
  <p>这是一段内容</p>
  <p>这是一段内容</p>
  <p>这是一段内容</p>
  <p>这是一段内容</p>
  <p>这是一段内容</p>
</vi-collapse>
<vi-button @click="open = !open">改变状态</vi-button>

<script>
 const open = ref(false)
</script>

标题插槽 新增

你也可以通过title插槽传入标题内容，将覆盖title属性内容

伸缩框

这是一段内容

这是一段内容

这是一段内容

这是一段内容

这是一段内容

展开代码

<vi-collapse title="我是一个朴实无华的伸缩框">
  <p>这是一段内容</p>
  <p>这是一段内容</p>
  <p>这是一段内容</p>
  <p>这是一段内容</p>
  <p>这是一段内容</p>
  <template v-slot:title>
    <vi-icon/>伸缩框
  </template>
</vi-collapse>

自动收回

通过autoRetract属性打开自动收回功能，当伸缩框失去焦点，即刻收回

下拉展开

这是一段内容

这是一段内容

这是一段内容

这是一段内容

这是一段内容

展开代码

<vi-collapse title="下拉展开" auto-retract>
  <p>这是一段内容</p>
  <p>这是一段内容</p>
  <p>这是一段内容</p>
  <p>这是一段内容</p>
  <p>这是一段内容</p>
</vi-collapse>

伸缩框组

通过collapse-group组件定义一组绳索框

使用accordion打开伸缩框组手风琴模式

下拉展开

这是一段内容

下拉展开

这是一段内容

下拉展开

这是一段内容

下拉展开

这是一段内容

展开代码

<vi-collapse-group accordion style="width: 400px;">
  <vi-collapse title="下拉展开">
    <p>这是一段内容</p>
  </vi-collapse>
  <vi-collapse title="下拉展开">
    <p>这是一段内容</p>
  </vi-collapse>
  <vi-collapse title="下拉展开">
    <p>这是一段内容</p>
  </vi-collapse>
  <vi-collapse title="下拉展开">
    <p>这是一段内容</p>
  </vi-collapse>
</vi-collapse-group>

Props

collapse

属性名	描述	类型	默认值

collapse-group

属性名	描述	类型	默认值

插槽

collapse

插槽名	描述	有无默认内容

collapse-group

插槽名	描述	有无默认内容

css变量

变量名	描述	默认值