使用cookie,让MessageBox 弹框一天内不再弹出

业务场景:基于element UI 15.6版本,MessageBox 弹框 点击一个按钮后,固定时间内不再弹出能不能实现?

需求分析:这个时候就需要用到我们浏览器的 Cookie 了,当点击按钮后,将一天后的时间存入到 cookie 中,第二次打开时,会首先判断一下当前的时间是否到了 cookie 中保存的时间,如果没到,则不用弹出!

功能实现:在线远行
使用cookie,让MessageBox 弹框一天内不再弹出_第1张图片

DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>MessageBox 弹框一天内不再弹出title>
    <script src="https://unpkg.com/vue@2">script>
    <script src="https://unpkg.com/[email protected]/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>

你可能感兴趣的:(Vue,javascript,vue.js,前端)