重新创建dialog,覆盖原来element-ui的el-dialog,Vue.component('elDialog', myDialog) 新写的myDialog组件prop属性"isScroll"决定了是否开启滚动 <divv-if="rendered"class="el-dialog__body"><el-scrollbarv-if="isScroll":style="{ 'height': 'calc(90vh - 150px)' }"><slot/></el-scrollbar><tem...
为了监听el-dialog内部的滚动事件,你可以在el-dialog的内容部分(通常是el-dialog-body)上添加滚动事件监听器。 示例代码 vue <template> <div> <el-button type="primary" @click="dialogVisible = true">打开 Dialog</el-button> <el-dialog title="提示" :visible.sync=...
// 大弹窗 滚动 .el-dialog__wrapper.big-dialog__wrapper { line-height: 1; .el-dialog { margin: 8vh auto 8vh !important; .el-dialog__header { } .el-dialog__body { } .edit-form-footer { margin-top: 40px; } } &::-webkit-scrollbar { display: none; } } // 小弹窗 居中 ....
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。 touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈...
简介:el-dialog中内容自定义滚动条 上代码 dialog中嵌套div,给div设置高度,并且overflow属性为auto,布局如下图: .sketch_content {// 必须有高度 overflow 为自动overflow: auto;height: 434px;border-top: 1px solid #eff1f4;border-bottom: 1px solid #eff1f4;padding: 0px 30px 11px 27px;}// 滚动条...
el-dialog 里面是一个表单,表单元素比较多,所以页面有滚动条。需要设置每次打开表单的时候,滚动条在顶部。 页面有一个按钮,点击按钮打开el-dialog 弹框。 一开始在网山搜索,有给元素设 id ,然后用 document.getElementById("idName").scrollTop = 0; 来设置滚动条到顶部。
有如下div布局(伪代码): <el-dialog><el-dialog__body><divclass="someclass"><divclass="my-wrap"><header>固定头部</header><content>内容区超出滚动</content></my-wrap></div></el-dialog__body></el-dialog> 在一个element 弹窗中,一段div布局里面有头部和内容区两块区域,要求头部不随内容区滚动...
优先发现的问题是,element plus中的el-dialog是内容优先的,即有多少内容高度就有多高。 太多的内容会导致总体页面出现滚动条。 而一般的管理系统,可以出现固定条的地方可能是弹窗中的内容,而不是整个页面 而弹窗中,下方的提交、取消按钮,是不动的。 也就是说,我现在希望弹窗中的内容根据内容大小出现滚动条,整个页...
el-dialogbody滚动的设置 .el-dialog { position: relative;margin: 0 auto 0px;background: #FFFFFF;border-radius: 2px;-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);-webkit-box-sizing: border-box;box-sizing: border-box;width:...
假设有5条内容,打开一项内容通过el-dialog进行展示,当出现滚动条后,往下滑动,紧接着通过esc或遮罩进行关闭,打开另一项内容,这时候滚动条并未进行置顶。 解决方法 参考就行了。 js部分 const data = reactive({ newsDialog: { show: false, currentNews: null, ...