最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
當前位置: 首頁 - 科技 - 知識百科 - 正文

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

來源:懂視網(wǎng) 責編:小采 時間:2020-11-27 22:20:37
文檔

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

vue.js實現(xiàn)只彈一次彈框:核心代碼是 getCookie()部分,控制彈框的顯示隱藏則在 created()中。 <template> <div v-if=isShow> <!--最外層背景--> <div class=popup_container> <!--居中的容器--> <i
推薦度:
導讀vue.js實現(xiàn)只彈一次彈框:核心代碼是 getCookie()部分,控制彈框的顯示隱藏則在 created()中。 <template> <div v-if=isShow> <!--最外層背景--> <div class=popup_container> <!--居中的容器--> <i

核心代碼是 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 中已經(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>

聲明:本網(wǎng)頁內容旨在傳播知識,若有侵權等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

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

vue.js實現(xiàn)只彈一次彈框:核心代碼是 getCookie()部分,控制彈框的顯示隱藏則在 created()中。 <template> <div v-if=isShow> <!--最外層背景--> <div class=popup_container> <!--居中的容器--> <i
推薦度:
標簽: VUE js 彈框
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top