业务场景：基于element UI 15.6版本,MessageBox 弹框 点击一个按钮后，固定时间内不再弹出能不能实现？
需求分析：这个时候就需要用到我们浏览器的 Cookie 了，当点击按钮后，将一天后的时间存入到 cookie 中，第二次打开时，会首先判断一下当前的时间是否到了 cookie 中保存的时间，如果没到，则不用弹出！
功能实现：在线远行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MessageBox 弹框一天内不再弹出</title>
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/locale/zh-cn.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
</head>
<body>
<div id="dynamic-component-demo">
<el-button size="small" type="primary" @click="oneClickFirmOffer">按钮</el-button>
</div>
<script>
new Vue({
el: "#dynamic-component-demo",
data: {
searchParam: {}
},
methods: {
oneClickFirmOffer() {
// 判断当前时间是否到了 cookie 中保存的时刻
if (this.getCookie("popped") < moment(new Date()).format("YYYY-MM-DD HH:mm:ss")) {
this.$confirm("这是一个弹窗", "提示", {
confirmButtonText: "朕已阅",
cancelButtonText: "一天内不再提示",
confirmButtonClass: "confirmButton",
cancelButtonClass: "cancelButton",
type: "warning"
})
.then(() => {})
.catch(() => {
// 将一天后的时刻存入 cookie ，下次访问时不会再弹出
let oneDayLater = moment(new Date()).add(1, "d").format("YYYY-MM-DD HH:mm:ss");
document.cookie = "popped = yes";
});
}
},
// 获取Cookie
getCookie(Name) {
var search = Name + "=";
var returnValue = "";
console.log(Name);
if (document.cookie.length > 0) {
console.log(document.cookie.length);
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>
</body>
</html>
