Appearance

Collapse 抽屉 ​

抽屉样式的布局 ——该组件泛用性一般，对策性极强 (大杯)

基本使用 ​

默认可以拉开多个抽屉，每个抽屉之间互不影响；
抽屉的标题部分支持属性传递，也支持title插槽传递，如抽屉C所示；

基本使用
抽屉A
抽屉B

这是抽屉B的内容部分

斜体加粗抽屉C 
<!-- 抽屉菜单的基本使用 -->
<script setup>
// 导入路径请参考安装部分
import { UtpCollapse, UtpCollapseItem } from '@will1919/utopia-ui';
import { ref } from 'vue';

// 当前已经拉开的抽屉
const collapseActiveArr = ref(['b'])
</script>

<template>
  <div>
    <utp-collapse v-model="collapseActiveArr">
      <utp-collapse-item name="a" title="抽屉A">
        <p>
          这是抽屉A的内容部分
        </p>
      </utp-collapse-item>
      <utp-collapse-item name="b" title="抽屉B">
        <p>这是抽屉B的内容部分</p>
      </utp-collapse-item>
      <utp-collapse-item name="c">
        <template v-slot:title>
          <i class="collapse-c-title">
            斜体加粗抽屉C
          </i>
        </template>
        <p>这是抽屉C的内容部分</p>
      </utp-collapse-item>
    </utp-collapse>
  </div>
</template>

<style scoped>
.collapse-c-title {
  font-weight: bold;
}
</style>

锁住抽屉 ​

通过给CollapseItem传入disabled属性锁住该抽屉

锁住抽屉
正常的抽屉
锁住的抽屉
<!-- 抽屉禁用 -->
<script setup>
// 导入路径请参考安装部分
import { UtpCollapse, UtpCollapseItem } from '@will1919/utopia-ui';
import { ref } from 'vue';

// 当前已经拉开的抽屉
const collapseActiveArr = ref([])
</script>

<template>
  <div>
    <utp-collapse v-model="collapseActiveArr">
      <utp-collapse-item name="a" title="正常的抽屉">
        <p>
          这是正常抽屉的内容部分
        </p>
      </utp-collapse-item>
      <utp-collapse-item name="lock" title="锁住的抽屉" disabled>
        <p>这是锁住抽屉的内容部分，这部分你看不到哦（ps:正常情况看到这段文字请联系我，那是出BUG了）</p>
      </utp-collapse-item>
    </utp-collapse>
  </div>
</template>

互锁模式 ​

通过传入accordion属性打开互锁模式

锁住抽屉
抽屉A
抽屉B
抽屉C
<!-- 抽屉菜单互锁模式 -->
<script setup>
// 导入路径请参考安装部分
import { UtpCollapse, UtpCollapseItem } from '@will1919/utopia-ui';
import { ref } from 'vue';

// 当前已经拉开的抽屉
const collapseActiveArr = ref([])
</script>

<template>
  <div>
    <utp-collapse v-model="collapseActiveArr" accordion>
      <utp-collapse-item name="a" title="抽屉A">
        <p>这是抽屉A的内容部分</p>
      </utp-collapse-item>
      <utp-collapse-item name="b" title="抽屉B">
        <p>这是抽屉B的内容部分</p>
      </utp-collapse-item>
      <utp-collapse-item name="c" title="抽屉C">
        <p>这是抽屉C的内容部分</p>
      </utp-collapse-item>
    </utp-collapse>
  </div>
</template>

Collapse API ​

Collapse属性 ​

属性说明类型默认值
modelValue / v-model设置当前打开抽屉的数组Array<string | number>[ ]
accordion设置互锁模式booleanfalse

Collapse插槽 ​

插槽名说明子标签
default抽屉项CollapseItem<CollapseItem>

Collapse方法 ​

插槽名说明类型
change切换当前的活动面板(values: string[] | number[]) => void

CollapseItem API ​

CollapseItem属性 ​

属性说明类型默认值
namemodelValue数组中对应的名称string | number—
title设置抽屉名称string—

CollapseItem插槽 ​

插槽名说明子标签
default抽屉内容—
title抽屉标题—