Question

我想显示一个警告框，通知用户某些事情。我希望它在5秒后消失，即使用户不承认也是如此。

我已经尝试过timeout和:timeout属性，但是这些属性似乎都不起作用，根据Vuetify文档，它们甚至都不存在于标记中，所以我一无所知。

模板：

<div>
      <v-alert
        :value="alert"
        v-model="alert"
        dismissible
        color="blue"
        border="left"
        elevation="2"
        colored-border
        icon="mdi-information"
      >Registration successful!</v-alert>
    </div>

    <div class="text-center">
      <v-dialog v-model="dialog" width="500">
        <template v-slot:activator="{ on }">
          <v-btn color="red lighten-2" dark v-on="on">Click Me</v-btn>
        </template>

        <v-card>
          <v-card-title class="headline grey lighten-2" primary-title>Privacy Policy</v-card-title>

          <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</v-card-text>

          <v-divider></v-divider>

          <v-card-actions>
            <div class="flex-grow-1"></div>
            <v-btn color="primary" text v-if="!alert" @click="dialog = false, alert">I accept</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
</div>

脚本：

import Vue from "vue";

export default {
  data() {
    return {
      alert: false,
      dialog: false
    };
  },

  created() {
    setTimeout(() => {
      this.alert = false
    }, 5000)
  }
};

Answer 1

在创建的挂钩添加超时范围内，使用5秒将alert属性更新为false：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data(){
    return{
       alert: true,
    }
  },
  created(){
    setTimeout(()=>{
      this.alert=false
    },5000)
  }
})

在模板中将v-alert的{{1}}属性绑定到value数据属性：

alert

选中此pen

Answer 2

尝试

setInterval: 5000;

这应该可以解决问题，就像超时一样！

但是您仍然需要为超时设置一个函数

也许您应该看看w3schools.com。并查看您可以如何处理警报！

Answer 3

您可以监视警报属性的更改，并在警报设置为 true 时设置超时，即显示警报。

import Vue from "vue";

export default {
  data() {
    return {
      alert: false,
      dialog: false
    };
  },
  watch: {
    alert(new_val){
      if(new_val){
        setTimeout(()=>{this.alert=false},3000)
      }
    }  
  }
};

如何在Vuetify中为<v-alert>标签分配超时变量？

3 个答案: