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

我在这个 pen 中模拟了你的情况