时间戳

首页 > 解决方案 > 如何将超时变量分配给Vuetify 中的标签？

javascript - 如何将超时变量分配给Vuetify 中的标签？

问题描述

我想显示一个警告框，通知用户某事。即使用户没有确认，我也希望它在 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)
  }
};

标签： javascriptvue.jsvuejs2vue-componentvuetify.js

解决方案

在创建的钩子中添加 5s 的超时范围，更新alert属性false：

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

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

<div id="app">
  <v-app id="inspire">
    <div>
      <v-alert type="success" :value="alert">
        I'm a success alert.
      </v-alert>

    </div>
  </v-app>

检查这支笔

推荐阅读