重写elementUI中的message提示框，解决提示框同时显示多个的问题

柔光的暖阳◎ 2022-12-08 05:24 395阅读 0赞

第一步：先写一个js文件：

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

**第二步,在 main.js 中引入**

import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    import {
      message
    } from './components/js/resetMessage';
    Vue.prototype.$message = message; // 这一个操作一定要放在Vue.use(ElementUI) 后面

第三步：使用：

// 在vue组件中代码中调用：
    this.$message.error('提示内容');//way1
    this.$message({type:success,message:'提示内容'}); //way2
    
    // 在js文件中调用：
    import {
        message
      } from '@/utils/resetMessage';
     
    message({type: 'error',message: '提示内容'});//way1
    message.error('提示内容'); //way2

<--  如有不妥，请指正；-->

发表评论取消回复

表情：

评论列表（有 0 条评论，395人围观）

还没有评论，来说两句吧...

相关阅读

相关重写elementUI中的message提示框，解决提示框同时显示多个的问题

第一步：先写一个js文件： import { Message } from 'element-ui'; let messageInst

柔光的暖阳◎/ 2022年12月08日 05:24/ 0 赞/ 396 阅读

相关 vue 如何写出仿elementui的message消息提示

利用render（虚拟dom）定义template组件就是正常的组件起名为index.vue <template> <transition n

秒速五厘米/ 2022年11月28日 10:43/ 0 赞/ 248 阅读

相关 php提示框代码,HTML实现简单的提示框

本文我们将和大家分享HTML实现简单的提示框，由于项目中需要一个简单的提示框，就是鼠标放上去，可以提示相关信息，引用第三方的比较麻烦，所以，这里封装了一个很简单的HTML方法。

ゞ浴缸里的玫瑰/ 2022年11月19日 01:25/ 0 赞/ 228 阅读

相关 jquery提示框

下拉提示框 function pointOut(errorData){ $("body").append("<div class='pointOut'

亦凉/ 2022年11月09日 12:49/ 0 赞/ 230 阅读

相关 html中如何写一个提示框,css画一个提示框

用css画一个如下图的提示框： ![3245ef82e636272cde848c67bacc976e.png][] 代码如下： Title .dialog\{ dis

左手的ㄟ右手/ 2022年10月05日 11:58/ 0 赞/ 200 阅读

相关 Vue——ElementUI 如何修改this.$message消息提示框样式及内容样式

产品需求：要求提示信息换行时单词不能分开 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_te

本是古典何须时尚/ 2022年09月10日 03:11/ 0 赞/ 544 阅读

相关 easyUI之Messager提示框的用法

分类警告消息框（icon）：alert error info question warning 交互消息框：confirm prompt 消息框的显示方式：show

素颜马尾好姑娘i/ 2022年08月24日 00:49/ 0 赞/ 1048 阅读

相关 7、EasyUI的messager消息提示框组件

EasyUI的messager消息提示框组件 <script type="text/javascript"> / 弹出普通消息 / function showMa

Bertha 。/ 2022年06月01日 22:41/ 0 赞/ 244 阅读

相关 Angular——提示框

今天做了一下提示框，也是模仿的，所以下面我就来简单解释一下如何制作提示框，以及解析一下代码和逻辑。其实整个逻辑思路很简单，就是先在前台用HTML的p-dialog

比眉伴天荒/ 2022年05月26日 13:26/ 0 赞/ 397 阅读

相关消息框-提示框

今天找到一个非常简单的提示消息弹出框直接上代码 html ![1500786-20181012154016519-1839245572.png][] css

迷南。/ 2021年09月29日 23:38/ 0 赞/ 471 阅读