简单封装element-ui中的消息提示Message和弹框组件 MessageBox

一、创一个index.js文件

import Vue from 'vue'
import { MessageBox,Message } from "element-ui";
Vue.component(Message.name,Message)
Vue.component(MessageBox.name,MessageBox)
//注意不要使用vue.use 不然初次加载会自动调用一次函数
/**
 * @hand this.$handAlent()
 * @author 封装 element-ui 消息提示
 * @param text
 * @param type 
 * @returns {Promise}
*/
export const handAlent=(text='操作成功',type="success")=>{
   
    return Message({
        showClose:true,
        message: text,
        type: type
    })
}
/** 
 * @hand this.$handClose()
 * @author 封装 element-ui 确定取消提示框
 * @param text
 * @param res 确定操作函数
 * @param rej 取消操作函数
 * @returns {Promise}
 * 
*/
export const handClose=(test='是否执行此操作',res,rej)=>{
    MessageBox.confirm(test, '提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        res()
      }).catch(() => {
        rej()      
      });
}

二、main.js中挂载在原型上

import Vue from 'vue'
import App from './App.vue'
import {Button} from 'element-ui'
import {handAlent,handClose} from '../src/utils/index'
Vue.config.productionTip = false
//挂载到原型上
Vue.prototype.$handAlent = handAlent
Vue.prototype.$handClose = handClose
Vue.use(Button)
new Vue({
  render: h => h(App),
}).$mount('#app')

三、组件里调用

<template>
  <div id="app">
 <el-button type="primary" @click="alent()">主要按钮</el-button>
  
  </div>
</template>

<script>


export default {
  name: 'App',
  methods:{
    alent(){
      this.$handAlent()
      this.$handClose()
      
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>