Teilen Sie Beispiele für Popup-Boxen, die in Vue nur einmal abgespielt werden

Dieser Artikel zeigt Ihnen hauptsächlich ein Beispiel für ein Popup-Fenster, das in Vue nur einmal abgespielt wird. Ich hoffe, es kann Ihnen helfen, sich mit Vue besser zu entwickeln.

Der Kerncode befindet sich im Teil getCookie() und das Ein- und Ausblenden des Kontroll-Popup-Felds befindet sich im Teil 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>

Verwandte Empfehlungen:

Ausführliche Erklärung zur Lösung des Problems verstümmelter chinesischer Zeichen, die bei der Einführung von JavaScript im Warn-Popup-Fenster angezeigt werden

js auto Einführung in Kapselungsbeispiele zum Definieren von Popup-Boxen

Gemeinschaft mehrerer häufig verwendeter Popup-Boxen

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für Popup-Boxen, die in Vue nur einmal abgespielt werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!