elementUI el-dialog自适应高度,仅body内容部分滚动

定义样式如下: 

.abow_dialog {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
    .el-dialog {
        margin: 0 auto !important;
        height: 90%;
        overflow: hidden;
        .el-dialog__body {
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }
}
在el-dialog标签中设置class="abow_dialog"即可

弹窗为页面高度的90%,且上下居中。

el-dialog__body内容部分会根据内容的高度,自动显示上下的滚动条。

结合《directive全局定义侦听window.resize,局部绑定侦听宽高的变化》可实现如下图效果:


————————————————
版权声明:本文为CSDN博主「tomabow」的原创文章
原文链接:https://blog.csdn.net/tomabow/java/article/details/89332683

  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
你可以在 el-dialog 组件中监听滚动事件,在滚动el-cascader 组件所在的位置时,手动触发 el-cascader 组件的 `handleClickoutside` 方法来隐藏所有子菜单。 例如: ```html <el-dialog title="Dialog Title" :visible.sync="dialogVisible" @scroll.native="handleDialogScroll" > <el-cascader ref="cascader" :options="options" :props="{ lazy: true }" ></el-cascader> </el-dialog> ``` ```javascript methods: { handleDialogScroll() { const cascaderEl = this.$refs.cascader.$el const cascaderOffsetTop = cascaderEl.offsetTop const cascaderHeight = cascaderEl.offsetHeight const scrollTop = this.$refs.dialog.$el.scrollTop const dialogHeight = this.$refs.dialog.$el.offsetHeight const scrollBottom = scrollTop + dialogHeight if ( cascaderOffsetTop >= scrollTop && cascaderOffsetTop + cascaderHeight <= scrollBottom ) { // el-cascader 组件在可视区域内,不做处理 return } // el-cascader 组件不在可视区域内,隐藏所有子菜单 const cascader = this.$refs.cascader if (cascader.isExpand) { cascader.handleClickoutside() } } } ``` 在滚动事件中,首先获取 el-cascader 组件的位置和高度信息,以及 el-dialog 组件的滚动位置和高度信息,然后根据这些信息判断 el-cascader 组件是否在当前可视区域内。如果 el-cascader 组件不在可视区域内,就手动触发 el-cascader 组件的 `handleClickoutside` 方法来隐藏所有子菜单。 需要注意的是,这里的 `handleClickoutside` 方法是 el-cascader 组件内部的一个方法,需要通过 `$refs` 获取到 el-cascader 组件的实例才能调用。同时,`isExpand` 属性是 el-cascader 组件内部用于判断子菜单是否展开的属性,需要保证 el-cascader 组件已经加载完成并且展开过子菜单才能使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值