封装 message消息弹框

最新推荐文章于 2024-11-25 14:42:00 发布

原创最新推荐文章于 2024-11-25 14:42:00 发布 · 612 阅读

1 ·

CC 4.0 BY-SA版权

小组件专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Element-UI库中的Message组件，并通过bus进行消息类型区分，实现不同类型的弹出通知。展示了详细的代码实现和在页面上的应用实例。

在这里插入图片描述
信息弹窗封装

import Vue from 'vue'
import {Message} from 'element-ui'
import bus from '../js/bus'
Vue.prototype.$message=Message
const commonFn={
    // message弹出信息提醒
    toastMsg(type,msg){
        switch(type){
            case 'normal':
                bus.$message(msg)
                break
                case 'success':
                    bus.$message({
                       message:msg,
                       type:'success'
                    })
                    break
                case 'warning':
                    bus.$message({
                        message:msg,
                        type:'warning'
                     })
                     break
                 case 'error':
                        bus.$message.error(msg)
                        break
        }
    }
}
export default commonFn

bus.js

import Vue from 'vue'
export default new Vue()

页面使用

//    引入弹出信息组件
   import _g from '../../assets/js/global.js'
      methods: {
            message(){
            //  点击弹出信息 可以用在请求成功或失败
            // _g.toastMsg('error', res.error)
            _g.toastMsg('success', '修改成功')
            },
      }