vue3实现边框伸缩

点击这个按钮实现左边的伸缩 实现效果如图： ✅ 1. 添加状态控制 在 setup() 或 data() 中添加控制变量：

▼
vue
复制代码
const isCollapsed = ref(false);

✅ 2. 按钮样式与点击事件 可以用自定义图标或使用 Element Plus 图标库（比如 ArrowLeft, ArrowRight），或直接使用你的图标文件：

▼
vue
复制代码
<template>
  <div class="flex items-center justify-between mb-2">
    <el-button
      @click="isCollapsed = !isCollapsed"
      icon="ArrowLeft"
      circle
      class="collapse-btn"
    ></el-button>
  </div>
</template>

<style scoped>
.collapse-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
}
</style>

也可以把你上传的图片作为按钮：

▼
vue
复制代码
<el-button @click="isCollapsed = !isCollapsed" circle class="collapse-btn">
  <img src="@/assets/your-icon.png" alt="toggle" style="width: 20px;" />
</el-button>

✅ 3. 左侧区域根据状态切换宽度

▼
vue
复制代码
<div :class="['transition-all duration-300', isCollapsed ? 'w-0' : 'w-64']" class="overflow-hidden">
  <!-- 患者列表内容 -->
</div>

也可以更灵活地隐藏内容（而非改变宽度）：

▼
vue
复制代码
<template>
  <div :class="{ 'hidden': isCollapsed }" class="w-64 transition-all duration-300">
    <!-- 患者列表内容 -->
  </div>
</template>

✅ 4. 如果想要图标随着状态旋转或变化

▼
vue
复制代码
<el-icon :class="{ 'rotate-180': isCollapsed }"><ArrowLeft /></el-icon>

<style scoped>
.rotate-180 {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
</style>