Snackbar Vuetify - 超时后覆盖方法

Answer 1

根据文档，该属性没有附加任何事件，但我将提供一个响应您的用例的解决方案，将

timeout

属性添加到您的数据对象，如下所示：

   data() {
         return {
          snackbar:false,
          timeout:6000,
          ....
         }
    }

将事件处理程序添加到您的按钮单击：

     <v-btn block
       color="primary" 
       dark
       @click="showSnackbar">
       Show Snackbar
    </v-btn>

在您的方法中添加

showSnackbar

方法

    methods: {
         showSnackbar() {
           this.snackbar=true;
           setTimeout(() => { this.$emit("yourEvent"); },this.timeout);
         }
       }

我用这支笔

模拟了你的情况

Answer 2

您还可以使用观察者。观察

snackbar === false

，然后执行该函数。

Answer 3

在超时后执行某些操作的最佳方法是使用 v-snackbar 组件提供的本机 events。在 Vuetify 2 中是

@input

，在 Vuetify3 中是

@update:modelValue

。这是一个例子：

<template>
    <v-snackbar v-model="message.status" :color="message.type" :bottom="true" :right="true" :timeout="timeout" @input="hide()">
        {{ message.text }}

        <template v-slot:action="{ attrs }">
            <v-btn class="mr-0" v-bind="attrs" text icon @click="hide">
                <v-icon color="white">mdi-close</v-icon>
            </v-btn>
        </template>
    </v-snackbar>
</template>

<script>
    import { mapGetters } from 'vuex'

    export default {
        name: 'Message',
        data() {
            return {
                timeout: 6000
            }
        },
        computed: {
            ...mapGetters(['message'])
        },
        methods: {
            hide() {
                this.$store.commit('hideMessage')
            }
        }
    }
</script>

所以，这里的

hide()

方法会在点击

close

按钮或者超时时执行。