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,谢谢大家阅读