el-dialog固定头部与底部以及中间内容滑动
作者：许多宝滴IT
这篇文章主要介绍了el-dialog固定头部与底部以及中间内容滑动实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题描述
如果不优化样式，会出现滑动占屏超出100%，不放便操作。
html和css优化代码：
<style lang="less" scoped>
::v-deep.home-confirm-dialog .el-dialog__body{
max-height: calc(100vh - 150px);
overflow: auto;
border-top:1px solid #dfdfdf;
border-bottom:1px solid #dfdfdf;
}
::v-deep .el-dialog{
position: fixed;
height:fit-content;
left:0 !important;
right:0 !important;
top:0 !important;
bottom:0 !important;
margin:auto !important;
}
</style><template>
<el-dialog
v-loading="loadingDialog"
:title="readonly ? '查看固定周期' : '固定周期设置'"
:visible.sync="add_show"
width="50%"
class="home-confirm-dialog"
top="2vh"
:close-on-click-modal="false"
element-loading-text="拼命发布中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.3)"
>
内容自已补充，不管多高，头部与底部会固定的
<div slot="footer" class="dialog-footer content_center">
<el-button v-if="!readonly" type="primary" @click="add_show = false">确认</el-button>
<el-button type="info" @click="add_show = false">取消</el-button>
</div>
</el-dialog>
</template>效果图
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。