如何使用计时器删除通知但仍保留删除按钮

Question

这是我目前的代码，我使用的是Javascript，Vue.js。

Messages.length是一个包含消息的数组。单击x时，它会触发“clearMessages（item）”这是我在服务器端的一个函数，但是我想创建一个在通知停留超过10秒时调用它的函数。

<div v-if="messages.length">
   <div class="notification is-success">
       <p v-for="item in messages">{{ item }}</p>
        <a @click="clearMessage(item)" class="delete"></a>
   </div>
</div>

Answer 1

您可以在任何函数中使用setTimeout向您的数组添加消息：

function addMessage(message) {
  messages.push(message);
  setTimeout(() => clearMessage(message), 10000);
}