uni-app:自带的消息提示被遮挡的解决办法（自定义消息提示框）

效果：

代码：

1、在最外层或者根组件的模板中添加一个容器元素，用于显示提示消息。例如：

<div class="toast-container" v-if="toastMessage"><div class="toast-content">{{ toastMessage }}</div>
</div>

2、在对应的样式文件中设置容器的样式，使其覆盖在页面的最上方。例如：

.toast-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9999; /* 设置一个较高的层级，确保在最上方 */pointer-events: none; /* 禁止容器响应用户的交互事件 */
}.toast-content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: rgba(0, 0, 0, 0.7);color: #fff;padding: 10px 10px;border-radius: 4px;font-size:14px;
}

3、在对应的 JavaScript 文件中，通过控制数据来显示和隐藏提示消息。例如：

data() {return {toastMessage: false,};
},
methods: {showCustomToast(message) {this.toastMessage = message;setTimeout(() => {this.hideCustomToast();}, 2000); // 控制提示消息显示时间，比如2秒后自动隐藏},hideCustomToast() {this.toastMessage = false;}
}

4、在需要显示提示消息的地方，调用 showCustomToast() 方法，并传入相应的消息内容。例如：

this.showCustomToast('这是提示消息的内容');