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选项卡插件实例
Mar 27 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
js获取url传值的方法
Dec 18 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 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
帅气的琦玉老师
2020/03/02 日漫
提升PHP执行速度全攻略
2006/10/09 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
ext 同步和异步示例代码
2009/09/18 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
低版本中Python除法运算小技巧
2015/04/05 Python
Python格式化日期时间操作示例
2018/06/28 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
python网络应用开发知识点浅析
2019/05/28 Python
python字符串查找函数的用法详解
2019/07/08 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
Pytorch之finetune使用详解
2020/01/18 Python
python 串行执行和并行执行实例
2020/04/30 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
销售总监工作职责
2013/11/21 职场文书
函授本科自我鉴定
2014/02/04 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书