Change the Notification component of element-ui to overlapping effect.

Effect:

Code:

<template>
  <el-button
    plain
    @click="open">
    偏移的消息
  </el-button>
</template>
<script>
export default {
    data(){
      return {
        num: 1
      }
    },
    methods: {
      open() {
        const style = document.createElement('style');
        const className = `notify-class-${this.num}`
        style.type = 'text/css';
        style.id = className;
        style.innerHTML = `.${className} {
          top: ${10*this.num}px!important 
          }`;
        document.getElementsByTagName('head')[0].appendChild(style);
        this.$notify({
          title: '偏移',
          onClose: () => {
            this.closeCb(className)
          },
          message: `这是一条带有偏移的提示消息-${this.num}`,
          duration: 0,
          customClass: className
        });
        this.num++
      },
      closeCb(id) {
        this.num--;
        const el = document.getElementById(id);
        el.remove();
      }
    }
  }
</script>

Online link: codepen.io/Yeter-the-s…