Как убрать всплывающую подсказку, когда пользователь впервые заходит на страницу? - PullRequest
Новая
       86

Как убрать всплывающую подсказку, когда пользователь впервые заходит на страницу?

0 голосов
/ 07 августа 2020

Я хочу показать всплывающую подсказку и всплывающую подсказку над ссылкой маршрутизатора , когда пользователь входит в систему в первый раз, и удалить ее при посещении страницы.

Маршрутизация уже выполняется настроил и работает нормально. Внутри моего приложения. 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>

Всплывающая подсказка появляется, но не исчезает в данный момент. Как мне удалить его, если пользователь посещает страницу хотя бы один раз?

Ответы [ 2 ]

1 голос
/ 07 августа 2020

Вы можете использовать cook ie или флаг локального хранилища, чтобы определить, был ли пользователь на этой странице раньше.

Пример использования локального хранилища: 

<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 мы проверяем, существует ли элемент localStorage с ключом already_visited, и если нет, мы показываем всплывающую подсказку. В противном случае оставим его без рендеринга.

0 голосов
/ 07 августа 2020

Вам нужно будет использовать несколько методов для переключения непрозрачности (или отображения, как вы хотите) на mouseover и mouseout: 

new Vue({
  el: "#app",
  methods: {
    showTooltip() {
      this.$refs.tooltip.style.opacity = '1';
    },
    hideTooltip() {
      this.$refs.tooltip.style.opacity = '0';
    }
  }
})
.tooltip {
  opacity: 0;
  transition: opacity 0.1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div id="nav">
    <a href="/home">Home</a>
    <a href="/User" @mouseover="showTooltip()" @mouseout="hideTooltip()">user-text
        <div class="tooltip" ref="tooltip">
            <span class="badge">!</span>
            <span class="tooltiptext">visit-page-for-first-time</span>
        </div>
    </a>
  </div>
</div>

Я использовал здесь теги <a>, но с <router-link> вы должны использовать модификатор события .native, например: 

<router-link to="/User" @mouseover.native="showTooltip()" @mouseout.native="hideTooltip()">
...