如何防止 Vue Snotify 确认显示多个实例

如何解决如何防止 Vue Snotify 确认显示多个实例

我对 Vue 和 snotify 还很陌生，所以请原谅新手问题。我已经扫描了文档，但没有任何内容让我眼前一亮。

事情是这样的：我有一个使用 snotify 确认框删除文件的 Vue 组件。像这样：

destroy() {
    this.$snotify.confirm('','Delete File?',{
      buttons: [
            {
                text: 'Yes',action: (toast) => {
                    axios.delete([API endpoint])
                    .then(response => {
                        // destroy the vue listeners,etc
                        this.$destroy();

                        // remove the element from the DOM
                        this.$el.parentNode.removeChild(this.$el);
                    });
                    this.$snotify.remove(toast.id);
                }
            },{
                text: 'No',action: (toast) => {
                    this.$snotify.remove(toast.id)
                }
            }
        ]
    })
}

问题是，如果您再次单击“删除”按钮，则会再次单击“删除文件？”确认出现在第一个上方。预期行为是第二​​次单击使确认消失。

如果您能提供任何帮助，我们将不胜感激。

解决方法

this.$snotify.confirm() 返回 toast 信息，其中包括可以传递给 this.$snotify.remove() 以进行删除的 ID：

export default {
  methods: {
    destroy() {
      if (this._toast) {
        this.$snotify.remove(this._toast.id,true /* immediate */)
      }

      this._toast = this.$snotify.confirm('','Delete File?',{/*...*/})
    }
  }
}

demo