最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

vue.js实现只弹一次弹框

来源:懂视网 责编:小采 时间:2020-11-27 22:20:37
文档

vue.js实现只弹一次弹框

vue.js实现只弹一次弹框:核心代码是 getCookie()部分,控制弹框的显示隐藏则在 created()中。 <template> <div v-if=isShow> <!--最外层背景--> <div class=popup_container> <!--居中的容器--> <i
推荐度:
导读vue.js实现只弹一次弹框:核心代码是 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 中已经有 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>

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

vue.js实现只弹一次弹框

vue.js实现只弹一次弹框:核心代码是 getCookie()部分,控制弹框的显示隐藏则在 created()中。 <template> <div v-if=isShow> <!--最外层背景--> <div class=popup_container> <!--居中的容器--> <i
推荐度:
标签: VUE js 弹框
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top