0
点赞
收藏
分享

微信扫一扫

Vue项目中,在js文件中使用ElementUi实现消息提示

开篇

大家好,我是麦洛,作为一个前端废材,今天在做项目时候遇到一个问题。当我在封装一个前端工具类js文件时,想使用​​elementui​​​的​​message​​组件来实现消息提示。经过一番学习,总算实现了,特意总结一下。

问题探究

一般在我们前端项目的​​main.js​​文件中,我们是这样引入ElementUi

import Element from 'element-ui'
Vue.use(Element, {
size: Cookies.get('size') || 'medium' // set element-ui default size
})

这样引入以后,在​​.vue​​​文件中我们就可以使用​​this.$message.success()​​​调用来实现消息提示
但是我们在​​​.js​​文件中这样调用,就会报错

实现思路

引入相关模块

import { Notification, MessageBox, Message, Loading } from 'element-ui'

消息提示

Notification.error({
title: msg
})

弹框提示

MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
isRelogin.show = false;
store.dispatch('LogOut').then(() => {
location.href = '/forecastCurvePage';
})
}).catch(() => {
isRelogin.show = false;
});

消息提示

Message({
message: msg,
type: 'error'
})

加载效果

//开启
downloadLoadingInstance = Loading.service({ text: "正在下载数据,请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })

//关闭
downloadLoadingInstance.close();

总结

经过上面方法,我们就可以实现在js文件中使用elementui,谢谢大家阅读


举报

相关推荐

0 条评论