首页 > web前端 > js教程 > 正文

利用vue.js如何实现弹框只弹一次

亚连
发布: 2018-06-09 10:16:45
原创
2571 人浏览过

本篇文章通过代码实例给大家详细讲述了一个vue的实例,实现只弹一次弹框功能,一起学习分享下。

核心代码是 getCookie()部分,控制弹框的显示隐藏则在 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(&#39;popped&#39;) == &#39;&#39;){ //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>
登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Vue中如何实现精简版风格(详细教程)

vue自定义全局组件该怎么做?

在vue2.0中如何实现多页面的开发

以上是利用vue.js如何实现弹框只弹一次的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板