Snackbar Vuetify - 超时后覆盖方法

Question

我想问你如何定义一个在 后执行的方法timeout？之后timeout我想执行$emit事件，但我不知道该怎么做......

<v-snackbar
  v-model="snackbar"
  :color="primary"
  :timeout="5000"
>
  {{ text }}
  <v-btn
    dark
    flat
    @click="snackbar = false"
  >
    Close
  </v-btn>
</v-snackbar>

https://vuetifyjs.com/en/components/snackbars

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);
         }
       }

我用这支笔模拟了你的情况