vue项目中对elementUI Messages消息提示框和确认提示框进行封装，能够全局使用

56 阅读 0 评论 37 点赞

我是靠谱客的博主俊秀裙子，最近开发中收集的这篇文章主要介绍vue项目中对elementUI Messages消息提示框和确认提示框进行封装，能够全局使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

vue项目中对elementUI Messages消息提示框和确认提示框进行封装，能够全局使用

1、在src下新建一个mixins文件夹
2、在文件夹下新建一个message.js文件和index.js文件、
如下图所示：
在这里插入图片描述

message.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(()=>{
        })
      })
    }
  }
}

消息提示框封装参数说明：

参数	说明
message	必填，提示内容，String类型
type	非必填，提示框类型，String类型，可选项为success/warning/info/error，默认值为warning
userHTML	非必填，是否将 message属性作为 HTML 片段处理，boolean类型，默认值为false
showClose	非必填，是否显示关闭按钮，boolean类型，默认值为false
duration	非必填，显示时间, 毫秒。设为 0 则不会自动关闭，number类型，默认值为2000

确认提示框封装参数说明：

参数	说明
message	必填，提示内容，String类型
title	非必填，标题，String类型
confirType	非必填，提示框类型，String类型，可选项为success/warning/info/error，默认值为warning
msgUserHTML	非必填，是否将 message属性作为 HTML 片段处理，boolean类型，默认值为false

在index.js中进行导出，代码如下：

export { default as messageBox } from './message'

3、在main.js中进行引入，代码如下，（前提：必须在全局安装和引入elementUI组件）

//引入封装好的消息提示框
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>