Nativescript-Vue 超时后关闭模式

Posted 2023-04-13

【中文标题】Nativescript-Vue 超时后关闭模式

【英文标题】：Nativescript-Vue close modal after timeout

【发布时间】：2020-05-10 16:29:59

【问题描述】：

我正在从 Nativescript-Vue 函数打开一个模态组件，该函数可以正常打开

this.$showModal(SuccessModal).then(() => console.log('Modal Closed') );

我可以从模态框内的按钮调用$modal.close，但如果我尝试从mounted() 挂钩调用它，则会得到$modal is undefined。

我希望模态框在三秒超时后自行关闭，而不是用户必须在模态框外单击。

我该怎么办？

【问题讨论】：

我无法重现这个问题，你能设置一个最小的 Playground 示例吗？

@Manoj play.nativescript.org/?template=play-vue&id=cipUop&v=3 这显示了一个基本的模式，那么我将在哪里/如何在设定的时间后自动关闭模式，而不必触摸屏幕？

我在您的示例中没有看到任何与$modal.close 相关的代码，请分享完整的示例，以便重现问题。

我更新了 Playground 以显示 $modal.close 返回未定义。

【参考方案1】：

当使用传统的函数语法时，您会丢失当前上下文 (this)，请使用箭头函数来避免这种情况。

setTimeout(() => 
    this.$modal.close();
, 3000);

否则您将不得不在变量中保留对上下文的引用

var me = this;
setTimeout(function() 
    me.$modal.close();
, 3000);

【参考方案2】：

这是@Manoj 的回应的一个转折点。 如果您愿意，可以在本机（非箭头）函数中使用 .bind()，而不是使用外部变量来绑定全局 this，如下所示：

setTimeout(function() 
    this.$modal.close();
.bind($this), 3000);