html - 使用 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>