不知何故,我的 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>
Run Code Online (Sandbox Code Playgroud)
我在我的主 js 文件中这样称呼它:
Vue.component('google-analytics-cookie', require('./components/GoogleAnalyticsCookieToastComponent.vue'));
Run Code Online (Sandbox Code Playgroud)
并将其像这样包含在我的 html 中:
<google-analytics-cookie></google-analytics-cookie>
Run Code Online (Sandbox Code Playgroud)
但是 Snackbar 在大约 6 秒后就消失了,文档说 0 应该防止这种情况发生,但它不起作用。
问题在于底部和右侧的属性绑定:
:bottom="'bottom'"
:right="'right'"
Run Code Online (Sandbox Code Playgroud)
这些应该是真或假而不是字符串。
它应该像文档中描述的那样工作。例子:
:bottom="'bottom'"
:right="'right'"
Run Code Online (Sandbox Code Playgroud)
new Vue({
el: '#app',
data () {
return {
snackbar: true,
timeout: 0,
bottom: true,
right: true
}
}
})Run Code Online (Sandbox Code Playgroud)