Error: If you call the.$notify method twice in a method, the notification boxes overlap.

export default {
  methods: {
    startHacking () {
      this.$notify({
        title: 'It works! '.type: 'success',
        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic! ',
        duration: 5000
      }),
      this.$nextTick(a); this.$notify({
        title: 'It works! '.type: 'success',
        message: 'Ollie 635664 here! ',
        duration: 5000
      })
    }
  }
}
Copy the code

The reason:

let verticalOffset = options.offset || 0;
  instances.filter(item => item.position === position).forEach(item => {
    verticalOffset += item.$el.offsetHeight + 16;
  });
  verticalOffset += 16;
  instance.verticalOffset = verticalOffset;
Copy the code

When calculating the spacing of notifications, the height of the current element is taken, item.$el.offsetHeight. However, because vue’s asynchronous update queue has a buffer mechanism, the dom is not updated during the first method call, resulting in a height of 0. The height of the first notification is not added

The method of using asynchronous functions

export default {
  methods: {
    startHacking:  async function() {
     await this.$notify({
        title: 'It works! '.type: 'success',
        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic! ',
        duration: 5000
      }),
     await this.$nextTick(a); this.$notify({
        title: 'It works! '.type: 'success',
        message: 'Ollie 635664 here! ',
        duration: 5000
      })
    }
  }
}
Copy the code