項目單獨引入 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: '已取消刪除'
        })
      })