基于elementui二次封装message提示

最新推荐文章于 2024-08-21 21:11:33 发布

smouns_

最新推荐文章于 2024-08-21 21:11:33 发布

阅读量228

点赞数

分类专栏： element-ui JavaScript vue 文章标签： elementui vue.js 前端

本文链接：https://blog.youkuaiyun.com/smouns_/article/details/129263084

版权

vue 同时被 3 个专栏收录

26 篇文章

订阅专栏

element-ui

10 篇文章

订阅专栏

JavaScript

4 篇文章

订阅专栏

文章展示了如何在Vue.js应用中创建一个全局的方法$msgTip，用于提供不同类型的提示信息，包括成功、错误和警告。此方法接受参数如消息内容、提示类型、警告时间和是否处理HTML片段，并在main.js中进行注册和注入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 全局方法注册 js文件中
export default {
         /***
         * 消息提示
         * @param msg
         * @param temp 类型值 默认是成功，1是错误，2是警告
         * @param warningTime 类型值 警告弹窗时间
         * @param isHtml 类型值 是否将 message 属性作为 HTML 片段处理
         */
        Vue.prototype.$msgTip = function (msg, temp,warningTime = 2000,isHtml = false) {
                let type = '';
                switch (temp) {
                    case 0: type = 'success'; break;
                    case 1: type = "error"; break;
                    case 2: type = 'warning';break;
                    default : type = 'success';break;
                }

                this.$message({
                    message: msg,
                    type: type,
                    dangerouslyUseHTMLString:isHtml,
                    duration: warningTime,
                    showClose: true
                });
            },

}

main.js文件中注册

import comm from './utils/comm.js' // 全局方法注入
Vue.use(comm)