配置Message全局弹窗

使用element组件:Message

在main.js中引入

//消息提示组件
import { Message } from "element-ui";
Vue.prototype.$message = Message 

这样就能在login.vue中使用this.$message

this.$refs.Form.validate(valid => {
        console.log(valid)
        if (valid) {
          if (username === 'admin' && password === 'admin') {
            console.log('输入正确')
            this.$message.success("登录成功")
          }else {
            this.$message.error('密码错误')
          }
        } else {
          this.$message.warning("登录失败")
        }

在这里插入图片描述

### 创建全局弹窗用于显示推送通知 为了在ElementUI中创建一个可以跨页面使用的全局弹窗来展示推送消息,最佳实践涉及几个方面: #### 1. 使用 `Vue.prototype` 注册全局方法 通过修改 Vue 实例原型链上的属性,可以在整个应用程序范围内访问自定义函数。这允许开发者从任意位置触发全局弹窗。 ```javascript // main.js 或入口文件 import Vue from 'vue'; import { Notification } from 'element-ui'; Vue.prototype.$notify = function (title, message, type) { Notification({ title: title, message: message, type: type || 'info' }); }; ``` 此代码片段展示了如何利用 Element UI 的 `Notification` 组件作为基础构建块,并将其配置为接受标题、正文和类型三个参数[^2]。 #### 2. 定义服务或工具类处理逻辑 对于更复杂的应用程序结构来说,建议将与通知相关的业务逻辑抽象到单独的服务层中去管理。这样做的好处是可以更容易地维护代码并保持模块化设计原则。 ```javascript // services/notificationservice.js export default class NotifyService { static success(title, msg) { this._showNotify('success', title, msg); } static error(title, msg) { this._showNotify('error', title, msg); } private static _showNotify(type, title, msg) { window.Vue.prototype.$notify(title, msg, type); // 调用之前注册的方法 } } ``` 上述例子说明了一个简单的通知服务实现方式,它提供了两个静态方法分别用来发送成功状态的通知以及错误警告[^3]。 #### 3. 在应用内集成 WebSocket 接收实时更新 如果目标是在接收到服务器端的消息推送时立即向用户发出提醒,则可以通过 WebSockets 来实现实时通信功能。一旦连接建立完成并且监听到了新的事件发生之后就可以调用前面提到过的 `$notify()` 方法来进行即时反馈给前端使用者。 ```javascript // websocket-client.js import io from 'socket.io-client'; const socket = io('http://localhost:8080'); socket.on('new_message', data => { const { title, content, status } = data; switch(status){ case "SUCCESS": NotifyService.success(title,content); break; case "ERROR": NotifyService.error(title,content); break; default: console.log(`Unknown notification status ${status}`); } }); ``` 这段脚本描述了怎样设置 Socket.IO 客户端并与后端 API 进行交互的过程;每当有新消息到来时就会依据其携带的状态字段决定应该呈现哪种形式的通知给最终用户查看[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值