el-drawer嵌套el-scrollbar纵向滚动条效果
时间: 2023-10-04 10:03:33 浏览: 353
Element-ui之ElScrollBar组件滚动条的使用方法
实现el-drawer嵌套el-scrollbar纵向滚动条效果,可以按照以下步骤进行:
1. 在el-drawer中添加el-scrollbar组件,设置其纵向滚动条属性:
```
<el-drawer>
<el-scrollbar wrap-class="scrollbar-wrap" vertical>
<!-- drawer content here -->
</el-scrollbar>
</el-drawer>
```
2. 在CSS中为scrollbar-wrap类设置高度和overflow属性,使其能够显示纵向滚动条:
```
.scrollbar-wrap {
height: 100%;
overflow-y: auto;
}
```
3. 根据需要在el-drawer中设置宽度和高度,以及其他样式属性。
完整代码示例:
```
<template>
<el-drawer :visible.sync="drawerVisible" :size="size">
<el-scrollbar wrap-class="scrollbar-wrap" vertical>
<div class="drawer-content">
<!-- drawer content here -->
</div>
</el-scrollbar>
</el-drawer>
</template>
<style>
.scrollbar-wrap {
height: 100%;
overflow-y: auto;
}
.drawer-content {
width: 300px;
height: 500px;
padding: 20px;
}
</style>
```
阅读全文