vue.js實(shí)現(xiàn)只彈一次彈框
更新時(shí)間：2018年01月29日 13:39:53 投稿：laozhang
本篇文章通過代碼實(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)容，感謝你對腳本之家的支持。
您可能感興趣的文章:
- js+html5實(shí)現(xiàn)半透明遮罩層彈框效果
- vue.js中toast用法及使用toast彈框的實(shí)例代碼
- js自定義彈框插件的封裝
- 輕松實(shí)現(xiàn)js彈框顯示選項(xiàng)
- js重寫alert事件（避免alert彈框標(biāo)題出現(xiàn)網(wǎng)址）
- js實(shí)現(xiàn)上下左右彈框劃出效果
- 基于layer.js實(shí)現(xiàn)收貨地址彈框選擇然后返回相應(yīng)的地址信息
- javascript實(shí)現(xiàn)無法關(guān)閉的彈框
- JavaScript實(shí)現(xiàn)alert彈框效果
- JavaScript封裝彈框插件的方法
相關(guān)文章
在Vue中使用Avue、配置過程及實(shí)際應(yīng)用小結(jié)
在項(xiàng)目中遇到通過點(diǎn)擊加號實(shí)現(xiàn)輸入框的增加、以及對該輸入框的輸入內(nèi)容進(jìn)行驗(yàn)證，通過這些誘導(dǎo)因素創(chuàng)作的這篇文章，本文重點(diǎn)給大家介紹在Vue中使用Avue、配置過程以及實(shí)際應(yīng)用,需要的朋友可以參考下2022-10-10
vue多頁面項(xiàng)目開發(fā)實(shí)戰(zhàn)指南
一般我們的vue項(xiàng)目都是單頁面的,其實(shí)因?yàn)関ue在工程化開發(fā)的時(shí)候依賴了webpack,webpack幫我們將所有的資源整合到一起而形成一個(gè)單頁面,下面這篇文章主要給大家介紹了關(guān)于vue多頁面項(xiàng)目開發(fā)的相關(guān)資料,需要的朋友可以參考下2022-01-01
最近領(lǐng)導(dǎo)交我一個(gè)項(xiàng)目是使用 vue-cli 搭建的單頁面應(yīng)用。下面小編通過本文給大家介紹vue將單頁面改造成多頁面應(yīng)用的方法 ，感興趣的朋友一起看看吧2018-11-11
這篇文章主要介紹了vue路徑上如何設(shè)置指定的前綴，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue3+vite+ts使用monaco-editor編輯器的簡單步驟
因?yàn)楫呍O(shè)需要用到代碼編輯器,根據(jù)調(diào)研,我選擇使用monaco-editor代碼編輯器,下面這篇文章主要給大家介紹了關(guān)于vue3+vite+ts使用monaco-editor編輯器的簡單步驟,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了解讀Vue實(shí)例的屬性及模板渲染問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)批量下載文件的方法（不走后端接口的方法）,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
在Vue3.0框架中,hooks函數(shù)允許將組件邏輯抽離復(fù)用,提高代碼的可維護(hù)性和復(fù)用性,通過封裝邏輯如獲取數(shù)據(jù)、處理狀態(tài)等,hooks使得組件開發(fā)更加高效和清晰,示例中,useDog.ts用于獲取狗狗圖片,展示了hooks封裝數(shù)據(jù)和邏輯、響應(yīng)式數(shù)據(jù)和異步操作的能力2024-10-10
這篇文章主要介紹了vue中的虛擬dom知識點(diǎn)總結(jié)，文章圍繞主題內(nèi)容展開詳細(xì)介紹，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2022-04-04
在vue中對數(shù)組值變化的監(jiān)聽與重新響應(yīng)渲染操作
這篇文章主要介紹了在vue中對數(shù)組值變化的監(jiān)聽與重新響應(yīng)渲染操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07