Home > Web Front-end > JS Tutorial > vue.js implements single pop-up box

vue.js implements single pop-up box

php中世界最好的语言
Release: 2018-03-23 09:49:49
Original
1556 people have browsed it

This time I will bring you vue.js to implement a single pop-up box. What are the precautions for vue.js to implement a single pop-up box. The following is a practical case, let’s take a look.

The core code is the getCookie() part, and the display and hiding of the control pop-up box is in 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>
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Angular2 parent-child component communication method

detailed code optimization of javascript

The above is the detailed content of vue.js implements single pop-up box. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template