vue.js實現(xiàn)只彈一次彈框
更新時間:2018年01月29日 13:39:53 投稿:laozhang
本篇文章通過代碼實例給大家詳細講述了一個vue的實例,實現(xiàn)只彈一次彈框功能,一起學習分享下。
核心代碼是 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 則賦給他一個值(此時彈框顯示) document.cookie = "popped = yes"; }else{ this.isShow = false; //若cookie 中已經(jīng)有 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>
以上就是這個功能的代碼實現(xiàn)內(nèi)容,感謝你對腳本之家的支持。
相關(guān)文章
在Vue中使用Avue、配置過程及實際應(yīng)用小結(jié)
在項目中遇到通過點擊加號實現(xiàn)輸入框的增加、以及對該輸入框的輸入內(nèi)容進行驗證,通過這些誘導因素創(chuàng)作的這篇文章,本文重點給大家介紹在Vue中使用Avue、配置過程以及實際應(yīng)用,需要的朋友可以參考下2022-10-10vue3+vite+ts使用monaco-editor編輯器的簡單步驟
因為畢設(shè)需要用到代碼編輯器,根據(jù)調(diào)研,我選擇使用monaco-editor代碼編輯器,下面這篇文章主要給大家介紹了關(guān)于vue3+vite+ts使用monaco-editor編輯器的簡單步驟,需要的朋友可以參考下2023-01-01在vue中對數(shù)組值變化的監(jiān)聽與重新響應(yīng)渲染操作
這篇文章主要介紹了在vue中對數(shù)組值變化的監(jiān)聽與重新響應(yīng)渲染操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07