如何在Vuetify中实现Snackbar每次打开时重置超时计时

问题根源 #

Vuetify 的 v-snackbar 组件仅会在 v-model 绑定值从 false 切换为 true、或是组件初次挂载时初始化超时计时器，后续更新文本、颜色等属性不会重置正在运行的计时逻辑，因此连续触发打开操作时会出现倒计时不重置的问题。

具体修改步骤 #

1. 修改 Vuex snackbar 模块代码 #

更新 snackbar.module.js，新增渲染标识字段，打开操作时先强制关闭旧实例再重新打开：

const state = {
    visible: false,
    color: "success",
    text: "",
    timeout: 4000,
    renderKey: 0 // 新增渲染标识字段
}

const mutations = {
    open(state, payload) {
        // 先关闭当前Snackbar，销毁旧计时器
        state.visible = false
        // 渲染标识自增，触发组件重渲染
        state.renderKey++
        state.text = payload.text;
        if (payload.color) { state.color = payload.color; }
        if (payload.timeout) { state.timeout = payload.timeout; }
        // 等待DOM更新完成后重新打开，保证状态切换生效
        setTimeout(() => {
          state.visible = true
        }, 0)
    },
    close(state) {
        state.visible = false;
        state.text = "";
    }
}

export default {
    namespaced: true,
    state,
    mutations
}

2. 修改 Snackbar 组件代码 #

给 v-snackbar 绑定渲染标识为 key，强制每次打开操作时都重新渲染组件：

<template>
  <v-snackbar
    :key="renderKey"
    v-model="visible"
    :color="color"
    :timeout="timeout"
    @input="handleClose"
  >
    {{ text }}
    <template v-slot:action="{ attrs }">
      <v-btn text v-bind="attrs" @click="handleClose">关闭</v-btn>
    </template>
  </v-snackbar>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState('snackbar', ['visible', 'color', 'text', 'timeout', 'renderKey'])
  },
  methods: {
    ...mapMutations('snackbar', ['close']),
    handleClose() {
      this.close()
    }
  }
}
</script>

方案说明 #

通过绑定动态key的方式，每次打开Snackbar时都会销毁旧组件实例、渲染新实例，确保计时器每次都会重新初始化，不会有旧计时器残留的问题，同时原有调用snackbar/open的业务代码不需要做任何修改。

内容的提问来源于stack exchange，提问作者Lidia K.