CollapseHz 横向的展开收起

用于横向的展开收起（基于flex布局,你可以快速生成一个展开收起的面板)，纵向展开收起推荐 vue-collapsed,比起antd自带的collapsed更具定制性; 如果你需要支持横纵项拖拽大小，推荐使用 vue-split-pane ；

基础用法

我是左侧内容

流程日志

展开方向

向左向右

悬停显示

默认显示悬停显示

复制代码

查看代码

<template>
     <div class="flex h-[300px]" v-if="expandDir === 'left'">
      <div class="flex-1 border-1 border-solid border-[#efefef]">
        我是左侧内容
      </div>
      <SCollapseHz
        v-model:open="open"
        :triggerMode="triggerMode"
        expandAttrBefore="flex: 0 0 64px"
        expandAttrAfter="flex: 0 0 200px"
      >
        <template #expand-render>
          <div>我是展开的流程日志</div>
        </template>
        <template #collapse-render>
          <div class="collapse-wrapper">
            <div class="tab-item" @click="open = true">
              <audit-outlined style="font-size: 16px" />
              <span class="text">流程日志</span>
            </div>
          </div>
        </template>
      </SCollapseHz>
    </div>
    <div class="flex h-[300px]" v-else>
      <SCollapseHz
        expandDir="right"
        :triggerMode="triggerMode"
        v-model:open="open"
        expandAttrBefore="flex: 0 0 64px"
        expandAttrAfter="flex: 0 0 200px"
      >
        <template #expand-render>
          <div>我是展开的流程日志</div>
        </template>
        <template #collapse-render>
          <div class="collapse-wrapper">
            <div class="tab-item" @click="open = true">
              <audit-outlined style="font-size: 16px" />
              <span class="text">流程日志</span>
            </div>
          </div>
        </template>
      </SCollapseHz>
      <div class="flex-1 border-1 border-solid border-[#efefef]">
        我是右侧内容
      </div>
    </div>
    <a-space class="mt-2">
      展开方向
      <a-radio-group v-model:value="expandDir">
        <a-radio value="left">向左</a-radio>
        <a-radio value="right">向右</a-radio>
      </a-radio-group>
    </a-space>
</template>

<style scoped lang="less">
.collapse-wrapper {
  .tab-item {
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.1s;
    cursor: pointer;
    :deep(.ant-icon) {
      margin-bottom: 5px;
    }
    .text {
      font-size: 12px;
    }
    &:hover {
      background-color: #f5f6f8;
    }
  }
}
</style>
<script setup lang="ts">
import { ref } from "vue";

const open = ref(false);

const expandDir = ref("left");

const triggerMode = ref("default");
</script>

自定义触发器(注：需要自己控制展开收起)

我是左侧内容

流程日志

复制代码

查看代码

<template>
    <div class="flex h-[300px]">
      <div class="flex-1 border-1 border-solid border-[#efefef]">
        我是左侧内容
      </div>
      <SCollapseHz
        v-model:open="open"
        expandAttrBefore="flex: 0 0 64px"
        expandAttrAfter="flex: 0 0 200px"
      >
        <template #trigger-render>
          <div class="custom-trigger">
            <RightOutlined class="text-[#fff]"/>
          </div>
        </template>
        <template #expand-render>
          <div>我是展开的流程日志</div>
        </template>
        <template #collapse-render>
          <div class="collapse-wrapper">
            <div class="tab-item" @click="open = true">
              <audit-outlined style="font-size: 16px" />
              <span class="text">流程日志</span>
            </div>
          </div>
        </template>
      </SCollapseHz>
    </div>
</template>

<style scoped lang="less">
.collapse-wrapper {
  .tab-item {
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.1s;
    cursor: pointer;
    :deep(.ant-icon) {
      margin-bottom: 5px;
    }
    .text {
      font-size: 12px;
    }
    &:hover {
      background-color: #f5f6f8;
    }
  }
}
.custom-trigger {
  position: absolute;
  top: 50%;
  height: 48px;
  transform: translateY(-50%);
  border: 1px solid #ebecee;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
  background-color: red;
  color: #666 !important;
  left: -11px;
  z-index: 10;
}
</style>
<script setup lang="ts">
import { ref } from "vue";

const open = ref(false);
const expandDir = ref("left");
</script>

API

Props

参数	说明	类型	默认值
open(v-model)	外部控制展开收起状态	boolean	false
expandAttrBefore	收起时的样式属性	string	'flex: 0'
expandAttrAfter	展开时的样式属性	string	'flex: 0 0 320px'
transitionAttr	过渡动画属性	string	'flex'
triggerMode	触发方式	'default'-默认显示触发器 | 'hover'-移动上去显示触发器	'default'
expandDir	展开方向	'left' | 'right'	'left'

Slots

名称	说明
trigger-render	自定义触发器
expand-render	展开时显示的内容
collapse-render	收起时显示的内容

注意事项

1. 组件默认使用 flex 布局，需要父容器设置 display: flex
2. 展开时内容会延迟显示，避免宽度挤压导致的视觉问题