Element使用JS全局触发消息
这篇文章发布于 2019/10/10，归类于 Vue
标签：
elementUI 全局触发消息，element使用js全局触发消息，element提示错误信息，element message，element 提示信息
在Vue中，单文件组件xx.vue里如果想触发ElementUI的提示消息（如错误信息、警告信息），怎么通过一行js就能触发呢？下面来看看调用方法
1.在main.js里引入Element
// main.js
import Vue from 'vue'
import ElementUI from 'element-ui' // 这里
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
2.将Element的相关函数绑定到Vue实例属性
将Element的相关函数绑定到Vue实例属性，绑定到实例属性后，就可以全局调用了，在单文件组件里 this.$xxx 就可以调用了。
// main.js
// 在 Vue.use(ElementUI) 后
Vue.prototype.$message = ElementUI.Message
Vue.prototype.$alert = ElementUI.MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$notify = ElementUI.Notification
3.在单文件组件xx.vue中调用
以消息提示为例子，介绍怎么在单文件组件中触发Element全局的消息提示
// 触发消息提示
this.$message({
type: 'error', // warning、success
message: '这是一条消息'
})
// 错误信息
this.$message.error('错误提示信息')
// 示例
try {
} catch(e) {
// 当捕捉到错误时提示错误信息
this.$message.error(e.message)
}