zoukankan      html  css  js  c++  java
  • element-ui Notification重叠问题,原因及解决办法

    场景

    在1个方法中调用两次this.$notify方法,会出现通知框重叠的问题

    testNotify() {
          this.$notify({
            title: "提示",
            message: '1111',
            dangerouslyUseHTMLString: true,
            duration: 0,
            position: "bottom-right"
          });
          this.$notify({
            title: "提示",
            message: '2222',
            dangerouslyUseHTMLString: true,
            duration: 0,
            position: "bottom-right"
          });
    },

    有局限的解决办法

    testNotify() {
          this.$notify({
            title: "提示",
            message: "1111",
            dangerouslyUseHTMLString: true,
            duration: 0,
            position: "bottom-right"
          });
          this.$nextTick(() => {
            this.$notify({
              title: "提示",
              message: "2222",
              dangerouslyUseHTMLString: true,
              duration: 0,
              position: "bottom-right"
            });
          });
    },

    推荐解决办法

    data(){
        return {
         notifyPromise:Promise.resolve()   
        }
    },
    methods:{
        notify(){
            //通知,解决element-ui,同时调用notify时,通知重叠的问题
            notify(msg) {
              this.notifyPromise = this.notifyPromise.then(this.$nextTick).then(()=>{
                this.$notify({
                  title: "提示",
                  message: msg,
                  dangerouslyUseHTMLString: true,
                  duration: 0,
                  position: "bottom-right"
                });
             })
            }
        },
        testNotify(){
            this.notify(111);
            this.notify(222);
            this.notify(333);
            this.notify(444);
        }
    }

    连接:https://juejin.im/post/5c87a77d6fb9a04a08228668

  • 相关阅读:
    7z usecaes
    最新状态
    ABAP 常用FUNCTION (最近工作中用到的)
    又是一个星期五
    阿牛
    自我定位的重要性
    smortform 创建
    换个角度想或许不一样
    为什么喜欢跟男生聊天小小分析
    BDC 代码设置
  • 原文地址:https://www.cnblogs.com/slightFly/p/11821671.html
Copyright © 2011-2022 走看看