이 기사에서는 주로 Vue에서 한 번만 재생되는 팝업 상자의 예를 공유합니다. Vue를 사용하여 더 나은 개발을 하는 데 도움이 되기를 바랍니다.
핵심 코드는 getCookie()部分,控制弹框的显示隐藏则在 created()에 있습니다.
<template>
<p v-if="isShow"> <!--最外层背景-->
<p class="popup_container"> <!--居中的容器-->
<img @click="noPopup" src="delete.png" alt=""> <!--关闭弹框-->
<p 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.
</p>
</p>
</p>
</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>
관련 권장사항:
JavaScript 도입 시 경고 팝업 상자에 중국어 문자가 깨져 표시되는 문제를 해결하는 방법에 대한 자세한 설명
js 사용자 정의 팝업 상자 플러그인의 캡슐화 예 소개
위 내용은 Vue에서 한 번만 재생되는 팝업 상자의 예 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!