Vue项目中,在js文件中使用ElementUi实现消息提示
今天在做项目时候遇到一个问题。当我在封装一个前端工具类js文件时,想使用的组件来实现消息提示。
·
开篇
大家好,我是麦洛,作为一个前端废材,今天在做项目时候遇到一个问题。当我在封装一个前端工具类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,谢谢大家阅读
更多推荐
已为社区贡献4条内容
所有评论(0)