时间戳

首页 > 解决方案 > 用户第一次访问页面时如何删除工具提示？

vue.js - 用户第一次访问页面时如何删除工具提示？

问题描述

我想在用户第一次登录时在路由器链接上显示工具提示和气泡，并在他访问页面时将其删除。

路由已经设置并且工作正常。在我的App.vue里面：

<template>
    <div id="app" >
        <div id="nav">
           <router-link to="/home">Home</router-link>
          
           <router-link to="/User">{{$t('user-text')}}

                <div class="tooltip">
                    <span class="badge">!</span>
                    <span class="tooltiptext">{{ $t('visit-page-for-first-time') }}</span>
                </div>

            </router-link>
        </div>

    </div>
</template>

工具提示正在显示，但目前并未消失。当用户访问该页面至少一次时，我将如何删除它？

标签： vue.jsvue-router

解决方案

您可以使用 cookie 或本地存储标志来确定用户之前是否访问过该页面。

使用本地存储的示例：

<template>
    <div id="app" >
        <div id="nav">
           <router-link to="/home">Home</router-link>
      
           <router-link to="/User">{{$t('user-text')}}

               <div class="tooltip">
                   <span class="badge">!</span>
                   <span class="tooltiptext" v-if="showTooltip">{{ $t('visit-page-for-first-time') }}</span>
               </div>

           </router-link>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                showTooltip: false
            }
        },

        created() {
            const alreadyVisited = localStorage.getItem('already_visited');

            if (!alreadyVisited) {
                this.showTooltip = true;

                this.setAlreadyVisited();
            }
        },
    
        methods: {
            setAlreadyVisited() {
                localStorage.setItem('already_visited', true)
            }
        },

        watch: {
            $route (to, from) {
                this.showTooltip = false;
            }
        } 
    }
</script>

默认情况下，这将隐藏工具提示。然后在created钩子中，我们检查带有 key 的 localStorage 项目是否already_visited存在，如果不存在，我们将显示工具提示。否则我们不渲染它。

推荐阅读