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

最新推荐文章于 2024-04-06 01:42:47 发布

噫危乎高哉

最新推荐文章于 2024-04-06 01:42:47 发布

阅读量1.2k

点赞数 2

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_42795670/article/details/133128856

版权

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

第一种

// 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);
    };
});

第二种

// 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);
    }
  }

第三种

// this.$message1( "添加成功" ,"success");
Vue.prototype.$message1 = function(msg, msgBg) {
    return ElementUI.Message({
        message: msg,
        duration: 800,
        type: msgBg,
        // showClose:true
    })
};