【vue页面点击箭头折叠收起部分效果布局】

效果演示

封装组件示例, 复制代码即可使用

<template>
  <div style="height: calc(100% - 1px); display: flex">
    <div class="left_box card" v-show="isCollapsed" style="margin-right: 0px">
      <!-- 左侧插槽 -->
      <slot name="leftSlot"></slot>
    </div>
    <div class="shrinkExpand" @click="toggle">
      <img v-if="isCollapsed" class="imgArrows" src="@/assets/leftArrows.png" />
      <img v-else class="imgArrows" src="@/assets/rightArrows.png" />
    </div>
    <transition name="fade">
      <div class="right_box card">
        <!-- 右侧插槽 -->
        <slot name="rightSlot"></slot>
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
export default {
  name: 'ShrinkExpandComponents'
}
</script>

<script lang="ts" setup>
import { ref, Ref } from 'vue'
import _ from 'lodash'
const isCollapsed = ref(true) //显示箭头折叠条
/**点击切换事件 */
const toggle = () => {
  isCollapsed.value = !isCollapsed.value
}
</script>
<style lang="scss" scoped>
.left_box {
  height: 100%;
  width: 350px; /* 左边固定的宽度 */
  flex-shrink: 0; /* 防止缩小 */
  border-radius: 0px;
}

.right_box {
  height: 100%;
  flex-grow: 1; /* 自动填充剩余空间 */
  overflow: auto; /* 右边内容过多时可以滚动查看 */
  border-radius: 0px;
}
.shrinkExpand {
  position: relative;
  height: 100%;
  width: 15px;
  flex-shrink: 0; /* 防止缩小 */
  background-color: #e0e3ea;
  cursor: pointer;
}
.imgArrows {
  position: absolute;
  left: -3px;
  top: 50%;
  width: 20px;
  height: 20px;
}
.card {
  background-color: #fff;
  border: 1px solid;
  border-color: #dfe3ea;
  box-shadow: 0 0 6px rgba(41, 51, 104, 0.1);
  padding: 10px;
  transition: box-shadow 0.3s ease; /* 添加过渡效果，使阴影变化更平滑 */
}
</style>

使用封装的组件页面代码示例

<template>
  <div>
    <ShrinkExpandComponents>
      <template #leftSlot>
        <div style="height: 100%; background-color: #f56c6c">左侧区域</div>
      </template>
      <template #rightSlot>
        <div style="height: 200px; margin-bottom: 2px; background-color: aqua">右侧上</div>
        <div style="height: calc(100% - 202px); background-color: bisque">右侧下</div>
      </template>
    </ShrinkExpandComponents>
  </div>
</template>

<script lang="ts">
export default {
  name: 'ShrinkExpand4'
}
</script>

<script lang="ts" setup>
import ShrinkExpandComponents from './shrinkExpandComponents.vue'
</script>
<style lang="scss" scoped></style>