vue 进入首页只弹一个弹框_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>