vue3 tab切换竖着

可以使用flex布局实现竖向的tab切换，具体实现步骤如下：

1. 父容器设置为flex布局，并设置flex-direction为column，使子元素竖向排列。
2. 子元素设置为flex布局，并设置flex-grow为1，使子元素平分父容器的高度。
3. 子元素设置为隐藏状态，通过点击tab按钮来切换显示对应的子元素。

示例代码如下：

HTML部分：

<div class="tab-container">
  <div class="tab-item active">Tab 1</div>
  <div class="tab-item">Tab 2</div>
  <div class="tab-item">Tab 3</div>
  <div class="tab-content active">Content 1</div>
  <div class="tab-content">Content 2</div>
  <div class="tab-content">Content 3</div>
</div>

CSS部分：

.tab-container {
  display: flex;
  flex-direction: column;
  height: 300px;
}

.tab-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 50px;
  background-color: #ccc;
  cursor: pointer;
}

.tab-item.active {
  background-color: #f00;
}

.tab-content {
  display: none;
  flex-grow: 1;
  padding: 20px;
}

.tab-content.active {
  display: block;
}