VUE中使用elementUI,弹窗以及消息通知
目前组里就我一个搞软件的,本来是搞java,现在也要维护更新前端的东西,真是难顶啊机器人云平台需要加报警弹窗的功能,目前想的是后台拿到报警信息,通过websocket推送到前台,前台是elementui搭建的,去官网找相应的组件第一步,先把之前的websocket代码放到ws.onmessage = function(msg) {//这里可以处理接收到服务器的数据console.log(msg);
·
目前组里就我一个搞软件的,本来是搞java,现在也要维护更新前端的东西,真是难顶啊
机器人云平台需要加报警弹窗的功能,目前想的是后台拿到报警信息,通过websocket推送到前台,前台是elementui搭建的,去官网找相应的组件
第一步,先把之前的websocket代码放到 < script > 里面,我放的是最下面,放在上面好像会因为加载顺序出问题
// 打开一个WebSocket:
var ws = new WebSocket('ws://127.0.0.1:12340/chat');
//open event
ws.onopen = function() {
console.log("open websocket...");
};
//close event
ws.onclose = function() {
console.log("close websocket...");
};
// 响应onmessage事件:
ws.onmessage = function(msg) {
//这里可以处理接收到服务器的数据
console.log(msg);
};
function ws_send(){
// 给服务器发送一个数字
ws.send(document.getElementById('input_msg').value);
}
第二部,添加组件
我的想法是,把这段代码,放到websocket的 响应onmessage事件里:
ws.onmessage = function(msg) {
//这里可以处理接收到服务器的数据
console.log(msg);
};
但是不成功,vue的方法都放在methods里面,不能放在这里,往下看文档,说到了全局调用:
在onmessage事件里通过$alert(message, title, options)还是没成功,
往下看到局部引入:
先引入:
import { MessageBox } from 'element-ui';
import { Notification } from 'element-ui';
import { Message } from 'element-ui';
我把消息提示、弹窗、通知都引入了
通过Message(options)调用时候,options为参数,标题、消息、之类的,这里要注意,options需要用{}包裹,形同:
弹窗效果:
通知效果:
消息提示效果:
更多推荐
已为社区贡献12条内容
所有评论(0)