时间戳

首页 > 解决方案 > 努力显示然后隐藏使用Vue的成功警报

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

问题描述

我有一个 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>

我创造了这个小提琴

我尝试添加一个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 中工作。

标签： htmlcssvue.jsvuejs2

解决方案

您可以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>

推荐阅读