项目单独引入 Element-ui 的 Message、MessageBox组件

一、单独引入Element-ui 的 Message组件

main.js里面：

 import { Button, Message} from "element-ui"

 Vue.use(Button)
 Vue.use(Message)

 

 

 跑起来后没有调用直接出来了一个默认弹框

原因：Message 组件并没有 install 方法供Vue来操作的，是直接返回的，那么按照 Eelement 文档单独引入的方法有问题

解决：给 Message 添加一个 install 方法

 main.js里面：

import { Button,  Message} from "element-ui"

Message.install = function (Vue, options) {
  Vue.prototype.$message = Message
}

Vue.use(Button)
Vue.use(Message)

 二、单独引入Element-ui 的 MessageBox组件

使用 MessageBox时同样按照引入 Message 的方法会报错

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler (Promise/async): "ReferenceError: MessageBox is not defined"

 所以选择挂载到 Vue 的原型对象上面

 main.js里面：

import { Button, Message, MessageBox } from "element-ui"

Message.install = function (Vue, options) {
  Vue.prototype.$message = Message
}

Vue.use(Button)
Vue.use(Message)

Vue.prototype.$messageBox = MessageBox

 调用的时候：

this.$messageBox.confirm('确定删除该项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          let res = await api.deleteReplyInfo(replyId)
          // ...   
          }
        } catch (error) {
          console.log(error)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })