效果图
动图
截图
思路
el-drawer的body部分本身是自带y轴滚动条的，但是 他没有设置footer的存在，所以我们要固定底部按钮，就要自己舍弃body自带的滚动条，重新划分出新的body和footer，然后给新的body一个滚动条就好了。
第一步，先设置好div布局，在一个body中嵌套新的两个div，分别作为新的body和footer，如下：
<template>
<div>
<!--抽屉-->
<el-drawer
title="消息通知"
:visible.sync="drawer"
size="25%"
ref="noticedrawer"
:before-close="DrawerClose">
<div class="xin-main">
<!--判断是否有消息进行显示-->
<div class="xin-message" v-if="noticeList.length === 0">
<p>暂无消息</p>
</div>
<div class="xin-content" v-else style="height: 90%;">
<!--你要显示的内容-->
</div>
<div class="xin-footer" style="position: fixed;bottom: 5px;right: 10px;">
<el-button type="text">全部已读</el-button>
<el-button type="primary">清空</el-button>
</div>
</div>
</el-drawer>
</div>
</template>第二步，删除body自带滚动条，如下：
.xin-main{
position: relative;
height: 100%;
overflow: hidden;
}第三步，给新的body添加滚动条，如下：
.xin-content{
overflow-y: scroll;
box-sizing: border-box;
overflow-x: hidden;
}这样基本逻辑就解决了，自行添加需要引入的内容放在新的body内就可以了。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/106468.html
