Snackbar Vuetify - 超时后覆盖方法

Posted 2023-02-22

【中文标题】Snackbar Vuetify - 超时后覆盖方法

【英文标题】：Snackbar Vuetify - override method after timeout

【发布时间】：2019-04-04 00:16:28

【问题描述】：

我想问你我如何定义一个在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

【参考方案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中模拟了你的情况

【讨论】：

不客气，抱歉我不明白你的用例

一个小吃店出现让我们说 2000 milsec 和不赞成，另一个出现

请查看codepen.io/boussadjra/pen/JjKxZyG

循环是什么意思？

请发表详细问题并给我问题链接

【参考方案2】：

您也可以使用观察者。注意snackbar === false，然后执行函数。