element 消息的封装

mixins.js

export default{
  methods:{
    // 消息提示
    messageBox(message,type,userHTML,showClose,duration){
      const msgInfo = message
      const msgType = type || 'warning'
      const msgUserHTML = userHTML || false
      const msgShowClose = showClose || false
      const msgDuration = duration || 2000
      this.$message({
        message: msgInfo,
        type:msgType,
        dangerouslyUseHTMLString:msgUserHTML,
        showClose:msgShowClose,
        duration:msgDuration
      })
    },
    // 确认提示框
    confirmMessageBox(message,title, confirType, msgUserHTML){
      return new Promise((resolve,reject)=>{
        this.$confirm(message, title || '提示',{
          confirmButtonText:'确认',
          cancelButtonText:'取消',
          dangerouslyUseHTMLString:msgUserHTML || false,
          type:confirType || 'warning'
        }).then(()=>{
          resolve()
        }).catch(()=>{
        })
      })
    }
  }
}

main.js
export { default as messageBox } from './message'
//引入封装好的消息提示框
import { messageBox } from './mixins'
Vue.mixin(messageBox)


页面使用
<template>
<div>
  <el-button  @click="tip">消息提示</el-button>
  <el-button  @click="quetip">确认提示框</el-button>
</div>
</template>

<script>
export default {
  name: "book",
  data() {
    return {
    };
  },
 
  methods:{
    tip(){
      this.messageBox("成功",'success')
    },
    quetip(){
      this.confirmMessageBox('您确认要删除吗','提示','error').then(()=>{
        // 点击确认后执行的操作
        console.log('删除成功')
      })
    }
  }
};
</script>



创建model.js
import { Message, MessageBox, Notification, Loading } from 'element-ui'

let loadingInstance;

export default {
  // 消息提示
  msg(content) {
    Message.info(content)
  },
  // 错误消息
  msgError(content) {
    Message.error(content)
  },
  // 成功消息
  msgSuccess(content) {
    Message.success(content)
  },
  // 警告消息
  msgWarning(content) {
    Message.warning(content)
  },
  // 弹出提示
  alert(content) {
    MessageBox.alert(content, "系统提示")
  },
  // 错误提示
  alertError(content) {
    MessageBox.alert(content, "系统提示", { type: 'error' })
  },
  // 成功提示
  alertSuccess(content) {
    MessageBox.alert(content, "系统提示", { type: 'success' })
  },
  // 警告提示
  alertWarning(content) {
    MessageBox.alert(content, "系统提示", { type: 'warning' })
  },
  // 通知提示
  notify(content) {
    Notification.info(content)
  },
  // 错误通知
  notifyError(content) {
    Notification.error(content);
  },
  // 成功通知
  notifySuccess(content) {
    Notification.success(content)
  },
  // 警告通知
  notifyWarning(content) {
    Notification.warning(content)
  },
  // 确认窗体
  confirm(content) {
    return MessageBox.confirm(content, "系统提示", {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: "warning",
    })
  },
  // 打开遮罩层
  loading(content) {
    console.log(content);
    loadingInstance = Loading.service({
      lock: true,
      text: content,
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    })
  },
  // 关闭遮罩层
  closeLoading() {
    loadingInstance.close();
  }
}


plugins/index.js
// 引入我们封装好的js
import modal from './model.js'
export default {
    // 这里应该算是传递一个Vue的实例过来
    install(Vue) {
      // 模态框对象
      Vue.prototype.$modal = modal
    }
  }

调用
main.js
// 封装的消息提示
import plugins from './plugins/index.js'
// 注意下面这个一定要在引入Elementc插件之前
Vue.use(plugins)
Vue.use(Element)


使用
// 打开loading的加载框
this.$modal.loading('加载中')
// 关闭loading的加载框
this.$modal.closeLoading()