Element-plus message 出现在dialog之下

作者:江月迟迟

发表于:2024-12-10

字数统计:485 字

预计阅读2分钟

问题描述

在dialog显示时，触发message，message出现在dialog下方。

问题原因

dialog遮罩层zIndex层级比message大

解决方案

自定义message样式或自定义dialog样式（不推荐）

简单调整message样式，设置自定义类名，调整zIndex使比dialog的大。但是会产生问题的问题。

问题描述

修改message样式，结果不生效

问题原因

element-plus是被引入的，在子组件下无法修改element-plus的样式

解决方案

将style标签的scoped去掉，允许样式向上穿透，且自定义样式的值设为!important

1. 重设message样式（不推荐）：

   <style>
       .element-message {
           z-index: 3000 !important;
       }
   </style>

2. 配合element-plus API，使用自定义样式：

   <script>
   ElMessage({
   	message: 'sth',
   	type: 'sth',
   	customClass: 'my-message-style'
   })
   </script>
   ...
   <style>
       .my-message-style {
           z-index: 3000 !important;
       }
   </style>

相关的文章

自己搜

使用应用程序上下文继承的方法，让element自动决定message的zindex层级

1. 全局挂载的方法（目前使用）：

   <script lang="ts" setup>
   	import { getCurrentInstance } from 'vue'
    	const _this = getCurrentInstance()
   	const Fn = () => {
          _this?.proxy?.$message.error('有表单项为空，请检查')
       }
   </script>

2. element指导方法（我不会用）：

   现在 Message 接受一条 context 作为消息构造器的第二个参数，允许你将当前应用的上下文注入到 Message 中，这将允许你继承应用程序的所有属性。

   你可以像这样使用它：

   TIP

   如果您全局注册了 ElMessage 组件，它将自动继承应用的上下文环境。

   import { getCurrentInstance } from 'vue'
   import { ElMessage } from 'element-plus'
   
   // 在你的 setup 方法中
   const { appContext } = getCurrentInstance()!
   ElMessage({}, appContext)

相关的文章