vue.js实现只弹一次弹框

 更新时间:2018年01月29日 13:39:53   投稿:laozhang  
本篇文章通过代码实例给大家详细讲述了一个vue的实例,实现只弹一次弹框功能,一起学习分享下。

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

以上就是这个功能的代码实现内容,感谢你对脚本之家的支持。

相关文章

  • vue element实现表格增加删除修改数据

    vue element实现表格增加删除修改数据

    这篇文章主要为大家详细介绍了vue element实现表格增加删除修改数据,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 浅谈vue-props的default写不写有什么区别

    浅谈vue-props的default写不写有什么区别

    这篇文章主要介绍了浅谈vue-props的default写不写有什么区别,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vuex Mutations同步Actions异步原理解析

    vuex Mutations同步Actions异步原理解析

    这篇文章主要为大家介绍了vuex Mutations同步Actions异步原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • Vue 简单实现前端权限控制的示例

    Vue 简单实现前端权限控制的示例

    这篇文章主要介绍了Vue 简单实现前端权限控制的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • vue3中template使用ref无需.value原因解析

    vue3中template使用ref无需.value原因解析

    vue3的template中使用ref变量无需使用.value,还可以在事件处理器中进行赋值操作时,无需使用.value就可以直接修改ref变量的值,这篇文章主要介绍了原来vue3中template使用ref无需.value是因为这个,需要的朋友可以参考下
    2024-06-06
  • 浅谈vue后台管理系统权限控制思考与实践

    浅谈vue后台管理系统权限控制思考与实践

    这篇文章主要介绍了浅谈vue后台管理系统权限控制思考与实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue使用Echart图标插件之柱状图

    Vue使用Echart图标插件之柱状图

    这篇文章主要为大家详细介绍了Vue使用Echart图标插件之柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • VueJS全面解析

    VueJS全面解析

    Vue.js(读音 /vju&#720;/, 类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。这篇文章主要介绍了VueJS全面解析的相关资料,需要的朋友可以参考下
    2016-11-11
  • 用了babel还需要polyfill吗原理解析

    用了babel还需要polyfill吗原理解析

    这篇文章主要为大家介绍了用了babel是否还需要polyfill的原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • vue+webpack模拟后台数据的示例代码

    vue+webpack模拟后台数据的示例代码

    这篇文章主要介绍了vue+webpack模拟后台数据的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07

最新评论