努力显示然后隐藏使用Vue的成功警报

Question

我有一个 Vue 网站，并且是 Vue 的新手。

我有一个测试按钮，单击该按钮时我想显示 Bootstrap 4（不是 Bootstrap-vue）成功 alert 然后在 x 秒后将其删除。

我已经完成了简单的部分，展示了它，但在一段时间后我似乎无法掌握隐藏它的窍门。

我的代码：

HTML

<template>
    <transition name="fade" mode="out-in">
        <button type="button" class="btn btn-danger" @click="testToast">TEST BUTTON</button>

        <div v-if="testButClicked" class="alert alert-success" role="alert">
            Item successfully added to your cart
        </div>
    </transition>
</template>

代码

<script>
    export default {
        data() {
            return {
                testButClicked: false
            }
        },

        methods: {
            testToast() {
                this.testButClicked = true;
            }
        }
    }
</script>

CSS

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 1.3s ease;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

我创建了这个fiddle

我尝试添加一个watch 来说明它何时显示setTimout 以将值设置回false，然后我尝试在全局文件中使用以下代码集，以便它可以按照我的意愿在全局范围内使用它它在其他页面上，但根本无法让它工作，我也找不到如何让它工作的帮助

Vue.effect('toast', {
    enter: function (el, insert, timeout) {
        // insert() will actually insert the element
    },
    leave: function (el, remove, timeout) {
        // remove() will actually remove the element
    }
})

然后我尝试了以下 HTML，它会再次正确转换或删除

<transition name="fade" mode="out-in" :duration="{ enter: 1500, leave: 2000 }">

我不想按下按钮，这似乎是我在网上找到的所有解决方案，我知道 jQuery 可以做到这一点，但无法让它在 Vue 中工作。

Answer 1

您可以在函数中添加setTimeout。不管这个函数是否是一个点击处理程序。

new Vue({
  el: "#app",
  data() {
    return {
      testButClicked: false
    }
  },
  methods: {
    testToast() {
      this.testButClicked = true;
      setTimeout(() => {
        this.testButClicked = false
      }, 5000)
    }
  }
})

body {
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.alert {
  background-color: lightgreen;
  padding: 15px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1.3s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button type="button" @click="testToast">TEST BUTTON</button>
  <br><br>
  <transition name="fade" mode="out-in">
    <div v-if="testButClicked" class="alert" role="alert">
      Item successfully added to your cart
    </div>
  </transition>
</div>

Answer 2

在方法上使用setTimeout 的替代方法是添加一个手表并在其中包含setTimeout。这样做的好处是 anything 导致设置此值将在请求时间后被清除，并且不能多次触发（因为它只会在值更改为 @987654324 时做出反应@)。修改小提琴here。更改的代码块（我使用 1s 超时只是因为我在测试过程中不耐烦;)）：

new Vue({
  el: "#app",
  data() {
    return {
      testButClicked: false
    }
  },
  methods: {
    testToast() {
      this.testButClicked = true;
    }
  },
  watch:{
    testButClicked(val){
      if (val){
        setTimeout(()=>this.testButClicked=false,1000);
      }
    }
  }
})