vue中全局修改elementui,message修改时长

有几种不同的写法对应不同的修改方式,都写在main.js里

第一种

bash 复制代码
// this.$message.success('添加成功')

['success', 'warning', 'info', 'error'].forEach(type => {
    ElementUI.Message[type] = options => {
        if (typeof options === 'string') {
            options = {
                message: options
            };
            options.duration = 800
            // if (type == 'warning' || type == 'error') {
            //     options.showClose = true
            // }
        }
        options.type = type;
        return ElementUI.Message(options);
    };
});

第二种

bash 复制代码
// this.$message({
//     message: '添加成功',
//     type: 'success'
// });
Vue.prototype.$message = function(msg){
    //根据msg对象中的type类型判断消息提示的类型
    let msgObj = {
      message:msg.message?msg.message:msg,
      duration: 800
    }
    let msgType = msg.type || ""
    switch(msgType) {
      case 'success':
        return  ElementUI.Message.success(msgObj);
      case 'warning':
        return  ElementUI.Message.warning(msgObj);
      case 'error':
        return  ElementUI.Message.error(msgObj);
      default:
        return  ElementUI.Message(msgObj);
    }
  }

第三种

bash 复制代码
// this.$message1( "添加成功" ,"success");
Vue.prototype.$message1 = function(msg, msgBg) {
    return ElementUI.Message({
        message: msg,
        duration: 800,
        type: msgBg,
        // showClose:true
    })
};
相关推荐
陟上青云8 分钟前
一篇文章带你搞懂原型和原型链
前端
我的写法有点潮8 分钟前
推荐几个国外比较流行的UI库(上)
前端·javascript·css
鹏多多14 分钟前
jsx/tsx使用cssModule和typescript-plugin-css-modules
前端·vue.js·react.js
Cherry的跨界思维44 分钟前
【AI测试全栈:Vue核心】22、从零到一:Vue3+ECharts构建企业级AI测试可视化仪表盘项目实战
vue.js·人工智能·echarts·vue3·ai全栈·测试全栈·ai测试全栈
ssshooter1 小时前
复古话题:Vue2 的空格间距切换到 Vite 后消失了
前端·vue.js·面试
IamZJT_1 小时前
拒绝做 AI 的“饲养员” ❌:前端程序员在 AI 时代的生存与进化指南 🚀
前端·ai编程
MM_MS1 小时前
Halcon控制语句
java·大数据·前端·数据库·人工智能·算法·视觉检测
程序员Agions1 小时前
程序员武学修炼手册(二):进阶篇——小有所成,从能跑就行到知其所以然
前端·程序员
小画家~1 小时前
第四十六: channel 高级使用
java·前端·数据库
小贵子的博客2 小时前
Ant Design Vue <a-table>
前端·javascript·vue.js·anti-design-vue