el-dialog弹出位置脱离文档流限制
时间: 2023-07-10 07:42:37 浏览: 80
如果你希望 `el-dialog` 弹出位置不受文档流限制,可以使用 `append-to-body` 属性。将该属性设置为 `true`,则 `el-dialog` 会被添加到 `body` 元素中,而不是被添加到它的父元素中。
示例代码如下:
```html
<el-dialog
title="提示"
:visible.sync="dialogVisible"
:append-to-body="true">
<p>这是一段内容</p>
</el-dialog>
```
这样,`el-dialog` 就会脱离文档流限制,可以在页面的任意位置弹出。需要注意的是,在使用 `append-to-body` 属性时,应该确保 `el-dialog` 的样式表和 JavaScript 文件已经被正确加载。
相关问题
el-dialog弹出框位置
el-dialog弹出框的位置可以通过添加自定义类样式来改变。有两种方式可以实现这一目的。第一种方式是将el-dialog添加一个class类样式,并将该样式放在全局样式中,注意style标签不能加scoped。例如:
```html
<style>
.test-dialog .el-dialog {
position: absolute;
left: 20px;
top: -30px;
}
</style>
```
第二种方式是给el-dialog添加一个custom-class类样式,并将该样式放在全局样式中,例如:
```html
<style lang="scss">
.test-dialog {
position: absolute;
font-size: 20px;
left: 20px;
top: -30px;
}
</style>
```
需要注意的是,这两种方式只能改变el-dialog没有定义的样式,比如字体等,不能通过定位来改变弹出框的位置。
将el-dialog弹出范围限制到html
如果你希望 `el-dialog` 弹出范围限制在 `html` 元素内,可以使用 `containment` 属性。将该属性设置为 `html`,则 `el-dialog` 只会在 `html` 元素内移动。
示例代码如下:
```html
<el-dialog
title="提示"
:visible.sync="dialogVisible"
:containment="'html'">
<p>这是一段内容</p>
</el-dialog>
```
这样,`el-dialog` 就不会超出 `html` 元素的范围,可以在页面内自由移动。需要注意的是,`el-dialog` 的默认行为是在页面内自由移动,因此只需要设置 `containment` 属性即可。