The core code is the getCookie() part, and the display of the control box is hidden in created().
<template>
<div v-if="isShow"> <!--The outermost background-->
<div class="popup_container"> <!--Centered container-->
<img @click="noPopup" src="" alt=""> <!--Close the pop-up box-->
<div class="popup_text"> <!--Content section-->
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 (('popped') == ''){ // If there is no popped in the cookie, it will be assigned a value (the box will be displayed at this time) = "popped = yes";
}else{
= false; //If there is already a popped value in the cookie, the pop-up box will not be displayed again }
},
methods: {
noPopup(){
= false;
},
getCookie(Name) { //cookie
var search = Name + "=";
var returnValue = "";
if ( > 0) {
var offset = (search);
if (offset !== -1) {
offset += ;
var end = (";", offset);
if (end == -1){
end = ;
}
returnValue = decodeURIComponent((offset, end));
}
}
return returnValue;
},
},
}
</script>
<style scoped>
/*Style part*/
</style>
The above is the code implementation of this function. Thank you for your support.