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>
原文地址:https://segmentfault.com/a/1190000013019136
Vue -- 只弹一次的弹框的更多相关文章
- Asp.net点击按钮弹出文件夹选择框的实现(网页)
本文地址:http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html 在Asp.net网站实际的开发中,比如:需要实现点击一个类似于FileUpload的 ...
- php网页,想弹出对话框, 消息框 简单代码
php网页,想弹出对话框, 消息框 简单代码 <?php echo "<script language=\"JavaScript\">alert(\&q ...
- vue结合element-ui实现二级复选框checkbox
vue结合element-ui实现二级复选框checkbox 话不多说先上效果 交互:1.点击按钮全选,所有的checkbox全部选中:点击清空,所有的checkbox框都不选:点击确定获取选中的ch ...
- 关于Android 打开新的Activity 虚拟键盘的弹出与不弹出
关于Android 打开新的Activity 虚拟键盘的弹出与不弹出 打开Activity 时 在相应的情况 弹出虚拟键盘 或者 隐藏虚拟键盘 会给用户非常好的用户体验 , 实现起来也比较简单 只需 ...
- 弹性ScrollView,和下啦刷新的效果类似 实现下拉弹回和上拉弹回
今天做了一个弹性ScrollView,和下啦刷新的效果类似,我想这个很多需求都用的这种效果 其实这是一个自定义的scrollView,上代码,这是我写在一个公共的组件包里的 package com.p ...
- Springboot+Vue实现仿百度搜索自动提示框匹配查询功能
案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...
- Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)
一.实际项目中有很多如下界面效果. 二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码: <!DOCTYPE html> <html> & ...
- 弹性ScrollView,和下啦刷新的效果相似 实现下拉弹回和上拉弹回
今天做了一个弹性ScrollView,和下啦刷新的效果类似,我想这个非常多需求都用的这样的效果 事实上这是一个自己定义的scrollView,上代码.这是我写在一个公共的组件包里的 package c ...
- vue 手机物理返回键关闭弹框
1.打开弹窗调用 window.history.pishState() 函数 2.关闭弹框 3.mounted 生命周期 监听popstate 事件 4.beforeDestroy 生命周期 移除po ...
随机推荐
- [CodeForces]786B Legacy
线段树优化建图. 建立两棵线段树,其上点的点权分别表示"到达这个区间内所有点的最小花费"和"到达这个区间内任意一个点的最小花费". 对于第一种路直接加边即可 对 ...
- 不引用第三方变量交换a和b的值
方法一:(可操作字符) a = a^b; b = a^b; a = a^b; 方法二:(可操作字符) a=a+b; b=a-b; a=a-b; 方法三:(不可以操作字符) a=a*b; b=a/b; ...
- Jquery 根据HTML内容选择元素
选择所有包含 "is" 的 元素: $("p:contains(is)")
- ActiveMQ 发送和接收消息
一.添加 jar 包 <dependency> <groupId>org.apache.activemq</groupId> <artifactId>a ...
- nyoj 803 大数问题
#include<stdio.h> #include<string.h> #define ll long long #define N 110000 int main() { ...
- php 文件夹 与 文件目录操作
php文件夹操作函数 string basename ( string path [, string suffix] )给出一个包含有指向一个文件的全路径的字符串,本函数返回基本的文件名.如果文件名是 ...
- 洛谷—— P2668 斗地主
https://www.luogu.org/problem/show?pid=2668 题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54 ...
- vue v-for 渲染完成回调
vue开发中等待vue渲染完成后加载数据的回调方法 Vue.nextTick(function () { alert("加载完成!"); }) 特别注意,如果使用ajax异步渲染的 ...
- 【机房重构】—上机&订餐
前几天通过UML图中的时序图.让我对于机房重构中的每一条线理解的更加清晰.曾经认为上机特别的乱,在一次偶遇中,得知了原来它能够转化成我们平时订餐.以下就听我说一说上机&订餐的故事吧! 又是发生 ...
- 深入分析JavaWeb Item39 -- 监听器(Listener)学习进阶
一.监听域对象中属性的变更的监听器 域对象中属性的变更的事件监听器就是用来监听 ServletContext, HttpSession, HttpServletRequest 这三个对象中的属性变更信 ...