首页 > 编程 > JavaScript > 正文

vue.js实现只弹一次弹框

2019-11-19 14:27:44
字体:
来源:转载
供稿:网友

核心代码是 getCookie()部分,控制弹框的显示隐藏则在 created()中。

<template> <div v-if="isShow"> <!--最外层背景-->  <div class="popup_container"> <!--居中的容器-->   <img @click="noPopup" src="delete.png" alt=""> <!--关闭弹框-->   <div 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.     </div>  </div> </div></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>

以上就是这个功能的代码实现内容,感谢你对武林网的支持。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表