vue.js实现只弹一次弹框
作者:laozhang 时间:2024-05-09 15:08:07
核心代码是 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>
来源:https://segmentfault.com/a/1190000013019136
标签:vue.js,弹框
0
投稿
猜你喜欢
django项目搭建与Session使用详解
2021-05-19 11:37:31
Python+Opencv实战之人脸追踪详解
2022-09-22 16:03:38
python+pytest接口自动化参数关联
2021-07-06 09:43:55
SQL语句删除2条重复数据一条保留一条
2012-07-11 15:51:44
python Selenium等待元素出现的具体方法
2022-02-22 02:47:20
Python实现的随机森林算法与简单总结
2021-07-10 20:59:54
解读pandas.DataFrame.corrwith
2023-10-17 13:22:09
数据库设计工具MySQL Workbench使用教程(超级详细!)
2024-01-29 01:26:22
python使用adbapi实现MySQL数据库的异步存储
2024-01-25 10:59:10
永不熄灭的爱心图标——腾讯公益月捐计划 “QQ首席图标”诞生记
2009-09-01 19:43:00
Vue2.0 axios前后端登陆拦截器(实例讲解)
2023-07-02 16:59:11
如何控制弹出一个NTLM验证窗口?
2009-12-16 19:01:00
asp如何读取注册表的信息?
2009-11-19 21:18:00
Python实现批量检测HTTP服务的状态
2023-02-21 12:50:55
Python实现Youku视频批量下载功能
2022-08-14 21:16:45
php实现mysql事务处理的方法
2023-11-10 10:42:39
关于jsp版ueditor1.2.5的部分问题解决(上传图片失败)
2023-06-15 06:45:00
关于base64编码的原理及实现方法分享
2023-08-31 07:34:40
Python while 循环使用的简单实例
2022-11-16 15:56:18
查看端口并杀进程python脚本代码
2022-06-26 21:58:32