在 window.confirm() 之前更改属性

Question

这是我下面的代码：

<a
@click="destroy"
:class="['button', { 'is-loading': deleting }]"
>
Delete
</a>
data: () => ({
deleting: false
}),
destroy () {
this.deleting = true
if (!confirm('Sure?') {
this.deleting = false
return
}
}

结果显示一个模式对话框并this.deleting is not true：/

是否可以在对话框之前更改删除属性？

Answer 1

在确认对话框出现时，UI 似乎尚未更新。您可以使用setTimeout(func, 0)稍微延迟确认对话框，以确保 UI 已更新。

它应该类似于：

destroy () {
this.deleting = true
// Store reference to `this` for access during callback.
var self = this;
setTimeout(function() {
if (!confirm('Sure?') {
// self - refers to `this` in the outer context.
self.deleting = false
return
}
}, 0);
}

或

destroy () {
this.deleting = true
setTimeout(() => {
if (!confirm('Sure?') {
this.deleting = false
return
}
}, 0);
}

requestAnimationFrame也可能是一个不错的选择。

请参阅：如何判断动态创建的元素何时呈现

注意：我还没有测试过这个，因为问题中没有MCVE。

Answer 2

在调用confirm并且模态显示时this.deletingtrue。但是，如果您期望 vue 组件执行一些不同的渲染，因为您更改了this.deleting那么不，这不会发生，因为确认正在阻塞。

我建议将confirm、alert、prompt的本机对话框处理包装到自己的函数中。这不仅允许它们异步打开/跳跃，而且还可以在以后用自定义对话框替换它们。

使用await/async和承诺，有一个很好的方法可以做到这一点：

你对话模块

const dlgs = {}
dlgs.confirm = function (message) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(confirm(message))
},0)
})
}

你的 Vue 组件

<a
@click="destroy"
:class="['button', { 'is-loading': deleting }]"
>
Delete
</a>

data: () => ({
deleting: false
}),
async destroy () {
this.deleting = true
if (! await dlgs.confirm('Sure?') {
this.deleting = false
return
}
// do the deleting
}

使用使用 html 实现的自定义对话框的优点是可以在打开对话框时在后台更新信息。