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

  • 相关阅读:
    jqueryui 进度条使用
    第一阶段站立会议03
    第一阶段站立会议02
    第一阶段站立会议01
    找到了——电梯会议
    软件需求规格说明书
    团队项目计划会议
    软件开发团队简介
    找水王
    NABCD需求分析
  • 原文地址:https://www.cnblogs.com/slightFly/p/11821671.html
Copyright © 2011-2022 走看看