限制el-drawer body 内容

如果你想要限制 el-drawer 组件内部 (el-drawer__body) 的内容，比如限制其最大高度并添加滚动条，可以通过 CSS 来实现这个需求。这样当内容超出预设的最大高度时，用户可以通过滚动查看全部内容，而不是让抽屉无限延伸。

下面是一个简单的示例，展示了如何通过内联样式或者外部 CSS 类来限制 el-drawer__body 的内容高度并启用滚动条：

使用内联样式

在你的 Vue 模板文件中，直接给 el-drawer__body 添加内联样式：

<template>
  <el-drawer title="Drawer Title" :visible.sync="drawerVisible">
    <div class="el-drawer__body" style="max-height: 500px; overflow-y: auto;">
      <!-- 这里放置你的内容 -->
      <p v-for="i in 100" :key="i">这是抽屉内的内容 {{i}}</p>
    </div>
  </el-drawer>
</template>

使用外部 CSS 类

在你的 CSS 文件中定义一个类，然后在模板中应用这个类：

/* 在你的样式文件中 */
.drawer-body-limit {
  max-height: 500px; /* 限制最大高度 */
  overflow-y: auto; /* 当内容超出时自动出现垂直滚动条 */
}

<template>
  <el-drawer title="Drawer Title" :visible.sync="drawerVisible">
    <div class="el-drawer__body drawer-body-limit">
      <!-- 这里放置你的内容 -->
      <p v-for="i in 100" :key="i">这是抽屉内的内容 {{i}}</p>
    </div>
  </el-drawer>
</template>

在这两个示例中，我们都设置了 max-height 为 500px，这意味着 el-drawer__body 的内容区域不会超过这个高度，同时通过 overflow-y: auto 确保当内容溢出时，会出现一个垂直滚动条供用户滚动查看剩余内容。你可以根据实际需求调整 max-height 的值。