指定持续时间后无法自动关闭 Vue-strap答案

【问题标题】：Unable to auto close Vue-strap after specified duration指定持续时间后无法自动关闭 Vue-strap
【发布时间】：2018-06-18 19:03:30
【问题描述】：

我在 Vue.js 中使用 Vue-strap 警报组件。警报框工作正常，但是，我无法在指定持续时间后自动关闭警报框。这是我正在使用的组件代码。

 <alert :show.sync="showAlert" placement="top" duration="3000" type="success" width="400px" dismissable>
      <span class="icon-info-circled alert-icon-float-left"></span>
      <strong>Success</strong>
      <p>{{alertMessage}}</p> 
    </alert>

警报框在单击关闭 (x) 按钮时保持打开和关闭状态。这是一个使用警报组件的代码笔。
https://codepen.io/Taxali/pen/dKJpKY

任何建议，如何在 3 秒后自动关闭警报框？谢谢。

【问题讨论】：

正如 in the github 对该项目所述，“抱歉，该项目不再维护”。

标签： vue.js vue-strap

【解决方案1】：

根据source code，只有在show props 发生变化时才会设置setTimeout(_, duration)。所以有一个解决方法，你可以在mounted方法中将show从false切换到true，或者你可以使用一个按钮来切换警报。

在 Vue 组件中setTimeout 自己的另一种方式。

 var vm = new Vue({
    components: {
        alert:VueStrap.alert,
    },
    el: "#app",
    data: {
        alertMessage:"Activity Saved Successfully.",
        showAlert:false
    },
    mounted() {
      this.showAlert = true
    }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/1.1.40/vue-strap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div id="app">
  
  <alert :show.sync="showAlert" placement="top" :duration="3000" type="success" width="400px" dismissable >
	  <span class="icon-info-circled alert-icon-float-left"></span>
	  <strong>Success</strong>
	  <p>{{alertMessage}}</p> 
	</alert>
  
</div>

【讨论】：