element-ui弹出多个message的问题处理

Posted 2022-12-14 骑着代马去流浪

重写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;

方法二：弹出前判断是否有相同弹出框，若有则关闭它再弹出新的

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

调用方法跟方法一一致