网络编程
位置：首页>> 网络编程>> JavaScript>> vue.js实现只弹一次弹框

vue.js实现只弹一次弹框

作者：laozhang　　发布时间：2024-05-09 15:08:07　

标签：vue.js,弹框

核心代码是 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>

来源：https://segmentfault.com/a/1190000013019136

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com