标签：vue 多个 弹框 single 报错 message showMessage type options

项目中使用element-ui时，message弹框功能是必须使用的，有时会在点击按钮时提示无权限，或者请求报错时给出适当提示：

但是重复点击按钮或者同一个页面多个请求同时报错时，就不美观了

可以看到，element-ui是动态往页面根节点插入message元素来实现弹框效果的，都拥有el-message属性

那么我们就可以通过判断页面中message的个数来决定要不要弹出第二个提示框

这就需要重新写一下element-ui的message

resetMessage.js

/**重置message，防止重复点击重复弹出message弹框 */
import {
    Message
} from 'element-ui';
const showMessage = Symbol('showMessage')
class DoneMessage {
    [showMessage](type, options, single) {
        if (single) {
            if (document.getElementsByClassName('el-message').length === 0) {
                Message[type](options)
            }
        } else {
            Message[type](options)
        }
    }
    info(options, single = true) {
        this[showMessage]('info', options, single)
    }
    warning(options, single = true) {
        this[showMessage]('warning', options, single)
    }
    error(options, single = true) {
        this[showMessage]('error', options, single)
    }
    success(options, single = true) {
        this[showMessage]('success', options, single)
    }
}
export const message = new DoneMessage();

main.js引入

import {
  message
} from '@/utils/resetMessage';
、、、、
Vue.use(ElementUI)
Vue.prototype.$message = message;

全局调用方法：

this.$message.error('hello')或者this,$message.error({message:'hello'})

注意：挂载自定义message必须放在Vue.use(ElementUI)后面，才能覆盖element-ui默认的message，不然没有效果

这样就不用担心重复点击会弹出好多弹框了

============================================================

今天同事提出了个获取更好体验的方法

按先前的方法，是更具页面中el-message的数量来决定要不要弹出下一个提示框，重复点击按钮时必须等上一个message隐藏了之后才能弹下一个，这就导致后续的点击没有反应，缺少页面反馈，会有卡顿的错觉，如果快速点击不同提示的按钮，由于第一个弹框还没隐藏，后续不同的提示也不会展示。

此时点击第二个按钮，但提示依然是按钮1的提示语

解决：

利用element-ui中message的close方法，在下一个弹框弹出前先把上一个弹框实例关闭掉

把之前的代码改造一下：

/**重置message，防止重复点击重复弹出message弹框 */
import {
    Message
} from 'element-ui';
const showMessage = Symbol('showMessage');
let messageInstance = null;
class DoneMessage {
    [showMessage](type, options, single) {
        if (messageInstance && single) {
            messageInstance.close()
        }
        messageInstance = Message[type](options)
        // if (single) {
        //     if (document.getElementsByClassName('el-message').length === 0) {
        //         Message[type](options)
        //     }
        // } else {
        //     Message[type](options)
        // }

    }
    info(options, single = true) {
        this[showMessage]('info', options, single)
    }
    warning(options, single = true) {
        this[showMessage]('warning', options, single)
    }
    error(options, single = true) {
        this[showMessage]('error', options, single)
    }
    success(options, single = true) {
        this[showMessage]('success', options, single)
    }
}
export const message = new DoneMessage();

这样重复点击的时候页面弹框和用户的行为有了一定的交互，体验更好

==========================================================

2019-12-31编辑

这样的封装方法有一个缺陷，因为是通过new方法创建的对象，所以只能拿通过$message.error()的形式调用，不支持$message({})形式调用，参考element-ui中message方法的实现，将封装再次优化一下

resetMessage.js

/**重置message，防止重复点击重复弹出message弹框 */
import {
    Message
} from 'element-ui';
let messageInstance = null;
const resetMessage = (options) => {
    if(messageInstance) {
        messageInstance.close()
    }
    messageInstance = Message(options)
}
;['error','success','info','warning'].forEach(type => {
    resetMessage[type] = options => {
        if(typeof options === 'string') {
            options = {
                message:options
            }
        }
        options.type = type
        return resetMessage(options)
    }
})
export const message = resetMessage

这样两种调用方式都支持了

标签：vue,多个,弹框,single,报错,message,showMessage,type,options
来源： https://blog.csdn.net/dongguan_123/article/details/101290164

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。