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 相关文章推荐
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
深入理解vue中的$set
Jun 01 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
js中Generator函数的深入讲解
Apr 07 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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
一段php加密解密的代码
2006/10/09 PHP
PHP生成静态页面详解
2006/11/19 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
Prototype Number对象 学习
2009/07/19 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
Linux操作面试题
2012/05/16 面试题
高中数学教师求职信
2013/10/30 职场文书
创业计划书模版
2014/02/05 职场文书
六一儿童节活动总结
2014/08/27 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技
python计算列表元素与乘积详情
2022/08/05 Python