el-dialog属性lock-scroll
时间: 2023-07-30 10:12:09 浏览: 152
el-dialog组件的lock-scroll属性是用来控制弹窗出现时是否锁定页面滚动的。当lock-scroll属性设置为true时,弹窗出现后页面将无法滚动,直到弹窗关闭为止。如果lock-scroll属性为false,则弹窗出现时页面可以继续滚动。该属性可以通过以下方式设置:
```
<el-dialog :lock-scroll="true">
<!-- 弹窗内容 -->
</el-dialog>
```
相关问题
el-dialog所有属性
el-dialog 是 Element UI 中的一个组件,它有以下属性:
1. title:对话框的标题。
2. visible:对话框是否可见。
3. width:对话框的宽度。
4. fullscreen:对话框是否全屏显示。
5. top:对话框距离页面顶部的距离。
6. modal:是否需要遮罩层。
7. modal-append-to-body:是否将遮罩层插入到 body 中。
8. lock-scroll:是否锁定背景滚动。
9. close-on-click-modal:是否可以通过点击遮罩层关闭对话框。
10. close-on-press-escape:是否可以通过按下 Esc 键关闭对话框。
11. show-close:是否显示关闭按钮。
12. center:是否居中显示对话框。
13. destroy-on-close:是否在关闭对话框时销毁对话框实例。
14. append-to-body:是否将对话框插入到 body 中。
15. custom-class:自定义类名。
16. close: 点击关闭按钮时触发的事件。
17. open: 对话框打开时触发的事件。
18. opened: 对话框打开且动画结束后触发的事件。
19. close: 对话框关闭时触发的事件。
20. closed: 对话框关闭且动画结束后触发的事件。
以上属性都可以通过在 el-dialog 标签中进行设置。
el-dialog点击穿透
对于el-dialog点击穿透的问题,可以尝试以下解决方法:
1. 使用`@click.stop`来阻止点击事件冒泡。在el-dialog组件上绑定@click.stop事件,这样点击el-dialog内部时不会触发父元素的点击事件。
```html
<el-dialog @click.stop>
<!-- 对话框内容 -->
</el-dialog>
```
2. 设置el-dialog的`lock-scroll`属性为false。默认情况下,el-dialog会阻止背景滚动,但这也可能导致点击穿透问题。可以将lock-scroll属性设置为false,允许背景滚动。
```html
<el-dialog :lock-scroll="false">
<!-- 对话框内容 -->
</el-dialog>
```