时间戳

首页 > 解决方案 > 有一种方法可以验证小吃店只打开一次吗？

vue.js - 有一种方法可以验证小吃店只打开一次吗？

问题描述

我正在插入一个快餐栏，并想知道它是否有办法让它对使用浏览器缓存的用户只显示一次。

这是我到目前为止得到的。

<template>
  <v-card>
    <v-snackbar
      v-model="snackbar"
      :bottom="y === 'bottom'"
      :left="x === 'left'"
      :multi-line="mode === 'multi-line'"
      :right="x === 'right'"
      :timeout="timeout"
      :top="y === 'top'"
      :vertical="mode === 'vertical'"
    >
      <router-link :to="rota" @click="snackbar = false" id="snackbarTexto"
        ><span>{{ text }}</span></router-link
      >
      <v-btn id="btnSnackbar" flat @click="snackbar = false">
        Fechar
      </v-btn>
    </v-snackbar>
  </v-card>
</template>

new Vue({
  el: '#app',
  data () {
   return {
      snackbar: true,
      y: "top",
      x: null,
      mode: "",
      timeout: 0,
      text: "Clique aqui para preencher a avaliação do módulo",
      rota: "/avaliacao_modulo"
    };
  }
})

https://codepen.io/anon/pen/OGwzGG

谢谢你。

标签： vue.jsvuetify.js

解决方案

我建议使用诸如 js-cookie 之类的库来存储一个 cookie，表示用户是否已经看到了小吃店消息。

我不确定您使用的是什么类型的构建系统，或者您是否使用的是 node/npm。您必须导入某种类型的 cookie 库，或者通过 vanilla JavaScript 自己管理 cookie。

另外，我把抽象的部分留给了你。确保这很容易更改，以防您以后想要实现任何新类型的消息。我希望这会有所帮助！

<template>
    <v-card>
        <v-snackbar v-model="showSnackbar"
                    :bottom="y === 'bottom'"
                    :left="x === 'left'"
                    :multi-line="mode === 'multi-line'"
                    :right="x === 'right'"
                    :timeout="timeout"
                    :top="y === 'top'"
                    :vertical="mode === 'vertical'">
            <router-link :to="rota" @click="showSnackbar = false" id="snackbarTexto">
                <span>{{ text }}</span>
            </router-link>

            <v-btn id="btnSnackbar" flat @click="showSnackbar = false">
                Fechar
            </v-btn>
        </v-snackbar>
    </v-card>
</template>

// Import js-cookie
// https://www.npmjs.com/package/js-cookie
import cookie from 'js-cookie';

new Vue({
    el: '#app',
    data () {
        return {
            // Set to false initially
            showSnackbar: false,

            y: "top",
            x: null,
            mode: "",
            timeout: 0,
            text: "Clique aqui para preencher a avaliação do módulo",
            rota: "/avaliacao_modulo"
        };
    },

    created() {
        // Give the snackbar cookie a name
        let cookieName = 'snackbar';

        // Check browser cookies for a snackbar cookie
        let snackbarCookie = cookie.get(cookieName);

        // If we have no cookie
        if (!snackbarCookie) {
            // Set a cookie so the snackbar doesn't come up again
            cookie.set(cookieName, true);

            // Show the snackbar
            this.showSnackbar = true;
        }
    },
});

推荐阅读