vuetify snackbar中的重置超时

krugob8w  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(241)

我正在寻找在vuetify中重置snackbar超时的解决方案。
例如,当我在登录时收到api的响应时,我打开snackbar:

if (data.status == "success") {
          this.$router.push({ name: "dashboard" });

          this.$store.commit("snackbar/open", {
            color: "success",
            text: data.message
          });
        } else {
          this.$store.commit("snackbar/open", {
            color: "error",
            text: data.message
          });

          this.apiErrors = data.errors;
        }

我的观点是,我第一次登录时出现了一个错误-显示了snackbar,然后我快速地将数据更改为正确,snackbar的颜色和消息也会更改,但是可见性时间不再计算,它是基于旧的时间。我怎样才能做到每次打开snackbar时都重置时间?我的意思是,如果snackbar是可见的,我打开另一个,时间会再次计数。
app.vue

<template>
  <v-app>
    <v-main class="grey lighten-3">
      <router-view></router-view>
      <Snackbar />
    </v-main>
  </v-app>
</template>

<script>
  import Snackbar from "./components/Snackbar";

  export default {
    name: "App",

    components: {
      Snackbar
    }
  };
</script>

snackbar.module.js

const state = {
    visible: false,
    color: "success",
    text: "",
    timeout: 4000
}

const mutations = {
    open(state, payload) {
        state.text = payload.text;
        if (payload.color) { state.color = payload.color; }
        if (payload.timeout) { state.timeout = payload.timeout; }
        state.visible = true;
    },

    close(state) {
        state.visible = false;
        state.text = "";
    }
}

export default {
    namespaced: true,
    state,
    mutations
}

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题