快捷導(dǎo)航

vue.js實(shí)現(xiàn)只彈一次彈框

更新時(shí)間：2018年01月29日 13:39:53 投稿：laozhang

本篇文章通過(guò)代碼實(shí)例給大家詳細(xì)講述了一個(gè)vue的實(shí)例，實(shí)現(xiàn)只彈一次彈框功能，一起學(xué)習(xí)分享下。

核心代碼是 getCookie()部分,控制彈框的顯示隱藏則在 created()中。

<template>
 <div v-if="isShow"> <!--最外層背景-->
  <div class="popup_container"> <!--居中的容器-->
   <img @click="noPopup" src="delete.png" alt=""> <!--關(guān)閉彈框-->
   <div class="popup_text"> <!--內(nèi)容部分-->
    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 則賦給他一個(gè)值（此時(shí)彈框顯示）
    document.cookie = "popped = yes";
   }else{
    this.isShow = false; //若cookie 中已經(jīng)有 popped 值，則彈框再不會(huì)顯示
   }
  },
  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>

以上就是這個(gè)功能的代碼實(shí)現(xiàn)內(nèi)容，感謝你對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

vue element實(shí)現(xiàn)表格增加刪除修改數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vue element實(shí)現(xiàn)表格增加刪除修改數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
淺談vue-props的default寫不寫有什么區(qū)別
這篇文章主要介紹了淺談vue-props的default寫不寫有什么區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
vuex?Mutations同步Actions異步原理解析
這篇文章主要為大家介紹了vuex?Mutations同步Actions異步原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
Vue 簡(jiǎn)單實(shí)現(xiàn)前端權(quán)限控制的示例
這篇文章主要介紹了Vue 簡(jiǎn)單實(shí)現(xiàn)前端權(quán)限控制的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
vue3中template使用ref無(wú)需.value原因解析
vue3的template中使用ref變量無(wú)需使用.value,還可以在事件處理器中進(jìn)行賦值操作時(shí),無(wú)需使用.value就可以直接修改ref變量的值,這篇文章主要介紹了原來(lái)vue3中template使用ref無(wú)需.value是因?yàn)檫@個(gè),需要的朋友可以參考下
2024-06-06
淺談vue后臺(tái)管理系統(tǒng)權(quán)限控制思考與實(shí)踐
這篇文章主要介紹了淺談vue后臺(tái)管理系統(tǒng)權(quán)限控制思考與實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
Vue使用Echart圖標(biāo)插件之柱狀圖
這篇文章主要為大家詳細(xì)介紹了Vue使用Echart圖標(biāo)插件之柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
VueJS全面解析
Vue.js（讀音 /vjuː/, 類似于 view）是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。這篇文章主要介紹了VueJS全面解析的相關(guān)資料,需要的朋友可以參考下
2016-11-11
用了babel還需要polyfill嗎原理解析
這篇文章主要為大家介紹了用了babel是否還需要polyfill的原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
vue+webpack模擬后臺(tái)數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue+webpack模擬后臺(tái)數(shù)據(jù)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07