Question

我设法实现了一个全局的Vuetify Snackbar。

我的问题是检测小吃栏何时关闭。从1.2开始，我了解到该组件支持Vue过渡事件。但是它仅在输入事件上起作用，而对离开事件不起作用。

这里是fiddle，用于理解。

<transition @before-enter="beforeEnter" @before-leave="beforeLeave" @after-enter="afterEnter" @after-leave="afterLeave" @leave="leave">
    <v-snackbar v-model="snackbar" top right>
        Hello
        <v-btn @click="snackbar = false" dark>Close</v-btn>
    </v-snackbar>
</transition>

Answer 1

我遇到了同样的问题并通过以下方式解决了

export default {
  data: () => ({
    errorMessage: '',
    snackTimeout: 6000,
  }),
  watch: {
    errorMessage() {
      setTimeout(() => {
        this.clearErrorMessage();
      }, this.snackTimeout);
    },
  },
  methods: {
    setErrorMessage(message) {
      this.snackMessage = message;
    },
    clearErrorMessage() {
      this.snackMessage = '';
    },
  },
};

<template>
    <v-snackbar
      :value="errorMessage"
      :timeout="snackTimeout"
      top
    >
      {{ errorMessage }}
      <v-btn
        color="error"
        flat
        @click.stop="clearErrorMessage"
      >
        {{ 'close' }}
      </v-btn>
    </v-snackbar>
</template>

定义一个带有超时的属性，另一个定义要包含的消息，以显示快餐栏。
定义一个函数来设置消息，并清除另一个函数。
为消息文本定义手表，并设置与timersBar具有相同超时的计时器以清除消息。
snackBar仅在消息不为空时显示。

Vuetify Snackbar休假事件

1 个答案: