Heim > Web-Frontend > js-Tutorial > Hauptteil

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

小云云
Freigeben: 2018-01-29 11:35:37
Original
1892 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!