Vuetify Snackbar 在 x 秒后消失，如何防止答案

【问题标题】：Vuetify Snackbar disappears after x seconds, how to prevent thatVuetify Snackbar 在 x 秒后消失，如何防止
【发布时间】：2019-05-10 03:53:06
【问题描述】：

不知何故，我的 vuetify Snackbar 在 6 秒后消失了，我试图阻止这种情况，但我失败了。这就是我的 vue 组件看起来它基本上是一个带有附加按钮的 Snackbar。

<template>
    <div>
        <v-snackbar
            :timeout="timeout"
            :bottom="'bottom'"
            :right="'right'"
            :auto-height="true"
            v-model="googleAnalyticsSnackbar"
        >
            {{ text }}
             <v-btn flat color="pink">
                 <a href="#">test</a>
            </v-btn>
            <v-btn flat color="pink" @click.native="googleAnalyticsSnackbar = false">yes</v-btn>
            <v-btn flat color="pink" @click.native="googleAnalyticsSnackbar = false">no</v-btn>
        </v-snackbar>
    </div>      
</template>

<script>
    export default {

        mounted() {
            if(this.checkCookieStatus() == false || this.checkCookieStatus() == null) {
                this.googleAnalyticsSnackbar = true;
            }
        },

        data: () => ({
            googleAnalyticsSnackbar: true,
            timeout: 0,
            text: 'foo'
        }),

        methods: {
            acceptCookie() {
                this.$cookie.set('cookie_accept_status', true, 1);
            },

            declineCookie() {
                this.$cookie.set('cookie_accept_status', false, 1);
            },

            checkCookieStatus() {
                return this.$cookie.get('cookie_accept_status');
            }
        }

    };
</script>

我在我的主 js 文件中这样称呼它：

Vue.component('google-analytics-cookie', require('./components/GoogleAnalyticsCookieToastComponent.vue'));

并像这样在我的 html 中包含它：

        <google-analytics-cookie></google-analytics-cookie>

但是 Snackbar 会在大约 6 秒后消失，文档说 0 应该防止这种情况发生，但它不会起作用。

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

问题在于底部和右侧的属性绑定：

:bottom="'bottom'"
:right="'right'"

那些应该是 true 或 false 而不是字符串。

它应该像文档中描述的那样工作。示例：

new Vue({
  el: '#app',
  data () {
    return {
      snackbar: true,
      timeout: 0,
      bottom: true,
      right: true
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.12/vuetify.min.js" integrity="sha256-MDwft2SRPd5GCJGWRIbkS5l7Gcr3S3vJr7MKpe1Z3+Q=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.12/vuetify.min.css" integrity="sha256-h8aOnZm3FeYz5m4z7eI3xc0uJX3l/mF+0i2643O7ieM=" crossorigin="anonymous" />

<div id="app">
  <v-app>
    <v-snackbar :timeout="timeout" v-model="snackbar" :bottom="bottom" :right="right" color="indigo">Hi There <v-btn @click="snackbar=false" dark>Close</v-btn></v-snackbar>
  </v-app>
</div>

【讨论】：

【解决方案2】：

为了防止小吃吧自动关闭，请将超时设置为 -1。当我将超时设置为 0 时，控制台警告说它已弃用并建议将其设置为 -1

【讨论】：

【解决方案3】：

new Vue({
  el: '#app',
  data () {
    return {
      snackbar: true,
      timeout: 0,
      bottom: true,
      right: true
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.12/vuetify.min.js" integrity="sha256-MDwft2SRPd5GCJGWRIbkS5l7Gcr3S3vJr7MKpe1Z3+Q=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.12/vuetify.min.css" integrity="sha256-h8aOnZm3FeYz5m4z7eI3xc0uJX3l/mF+0i2643O7ieM=" crossorigin="anonymous" />

<div id="app">
  <v-app>
    <v-snackbar :timeout="timeout" v-model="snackbar" :bottom="bottom" :right="right" color="indigo">Hi There <v-btn @click="snackbar=false" dark>Close</v-btn></v-snackbar>
  </v-app>
</div>

【讨论】：

避免只给出代码作为答案。解释您所做的更改，以及为什么它应该解决问题。