element中弹框和message层级问题,怎么解决
时间: 2024-03-05 08:53:47 浏览: 20
在 Element 中弹框和 Message 的层级问题可以通过修改它们的 `z-index` 属性来解决。一般情况下,弹框的 `z-index` 属性比 Message 的要高,这样弹框就可以覆盖在 Message 上面了。
你可以通过以下两种方式来修改它们的 `z-index` 属性:
1. 在全局 CSS 中添加以下样式:
```css
.el-message {
z-index: 9999; /* 修改 Message 的 z-index 属性 */
}
.el-dialog__wrapper {
z-index: 10000; /* 修改弹框的 z-index 属性 */
}
```
2. 在弹框和 Message 中分别添加 `z-index` 属性:
```html
<el-dialog
:visible="dialogVisible"
:z-index="10000" <!-- 修改弹框的 z-index 属性 -->
>
<!-- 弹框内容 -->
</el-dialog>
this.$message({
message: '提示信息',
type: 'success',
duration: 3000,
center: true,
offset: 100, <!-- 修改 Message 的 z-index 属性 -->
z-index: 9999 <!-- 修改 Message 的 z-index 属性 -->
});
```
以上两种方式都可以解决 Element 中弹框和 Message 的层级问题。