vue.js实现只弹一次弹框


Posted in Javascript onJanuary 29, 2018

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

以上就是这个功能的代码实现内容,感谢你对三水点靠木的支持。

Javascript 相关文章推荐
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
JavaScript的function函数详细介绍
Nov 20 Javascript
javascript trie前缀树的示例
Jan 29 #Javascript
Vue官网todoMVC示例代码
Jan 29 #Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 #jQuery
Angular2 父子组件通信方式的示例
Jan 29 #Javascript
jQuery代码优化方法总结
Jan 29 #jQuery
javascript代码优化的8点总结
Jan 29 #Javascript
浅析Node.js非对称加密方法
Jan 29 #Javascript
You might like
一个odbc连mssql分页的类
2006/10/09 PHP
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python正则表达式知识汇总
2017/09/22 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
Python实现微信小程序支付功能
2019/07/25 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
《宿建德江》教学反思
2014/04/23 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
pandas中关于apply+lambda的应用
2022/02/28 Python