【Vue】二次封装 $message 带遮罩，禁止操作

对element UI 组件的 $message 进行二次封装，带上遮罩，关闭按钮

效果展示：

common.js文件

import { Message, Loading } from 'element-ui'

// 对 $message 进行二次封装
export function showMessage(type, msg) {
  const loadingInstance = Loading.service({
    lock: true,
    spinner: 'el-icon',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  Message({
    showClose: true, // 是否显示关闭按钮
    type: type,
    message: msg,
    duration: 10000, // 延时关闭时间
    dangerouslyUseHTMLString: true, // 是否编译HTML
    onClose() {
      // 关闭遮罩
      loadingInstance.close()
    },
  })
}

index.js 文件 全局使用该方法

import { showMessage } from '../utils/common'
Vue.prototype.$showMessage = showMessage

页面使用

this.$showMessage('success', msg)