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 相关文章推荐
JS 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
JavaScript函数、方法、对象代码
Oct 29 Javascript
jQuery示例收集
Nov 05 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
JavaScript监听键盘事件代码实现
Jun 03 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
VUE动态生成word的实现
Jul 26 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
javascript版2048小游戏
2015/03/18 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
python 统计代码行数简单实例
2017/05/04 Python
python Pygame的具体使用讲解
2017/11/03 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
Python计算IV值的示例讲解
2020/02/28 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
介绍一下JMS编程步骤
2015/09/22 面试题
制冷与电控专业应届生求职信
2013/11/11 职场文书
个人简历自我评价范文
2014/02/04 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
求职自我评价范文
2015/03/09 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers