我正在寻找在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
}
暂无答案!
目前还没有任何答案,快来回答吧!