Partager des exemples de boîtes contextuelles qui ne sont lues qu'une seule fois dans Vue

Cet article partage principalement avec vous un exemple de boîte pop-up qui ne joue qu'une seule fois dans Vue. J'espère qu'elle pourra vous aider à mieux développer en utilisant Vue.

Le code principal se trouve dans la partie getCookie(), et l'affichage et le masquage de la boîte de dialogue de contrôle se trouvent dans created().

<template>
  <p v-if="isShow"> <!--最外层背景-->
    <p class="popup_container"> <!--居中的容器-->
      <img @click="noPopup" src="delete.png" alt=""> <!--关闭弹框-->
      <p class="popup_text"> <!--内容部分-->
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, atque ea eveniet laudantium magni, maiores nam nihil non numquam odio pariatur perferendis placeat quas quasi sit soluta, sunt ullam voluptatibus.    
      </p>
    </p>
  </p>
</template>
<script>
  export default {
    data(){
      return{
        isShow: true,
      }
    },
    created(){
      if (this.getCookie('popped') == ''){ //cookie 中没有 popped 则赋给他一个值（此时弹框显示）
        document.cookie = "popped = yes";
      }else{
        this.isShow = false; //若cookie 中已经有 popped 值，则弹框再不会显示
      }
    },
    methods: {
      noPopup(){
        this.isShow = false;
      },
      getCookie(Name) { //cookie
        var search = Name + "=";
        var returnValue = "";
        if (document.cookie.length > 0) {
          var offset = document.cookie.indexOf(search);
          if (offset !== -1) {
            offset += search.length;
            var end = document.cookie.indexOf(";", offset);
            if (end == -1){
              end = document.cookie.length;
            }
            returnValue = decodeURIComponent(document.cookie.substring(offset, end));
          }
        }
        return returnValue;
      },
    },
  }
</script>
<style scoped>
    /*样式部分*/
</style>

Recommandations associées :

Explication détaillée de la résolution du problème des caractères chinois tronqués affichés dans la boîte de dialogue d'alerte lorsque JavaScript est introduit

js auto Introduction aux exemples d'encapsulation de définition de boîtes pop-up

Partage de plusieurs boîtes pop-up couramment utilisées

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!