【Vue】用户首次登录显示dialog

【Vue】用户首次登录显示dialog

1. 背景

• vue + element-UI
• 应用场景
  • 用户每天第一次登录时，给出对应的弹窗提示；
  • 弹窗提示一天只会出现一次；
  • 设置cookie，cookie的过期时间为次日0点。

2. 实现

2.1 dialog 设计

• 实现效果如下。
  

• dialog标签代码如下。

<el-dialog title="公告" v-model="dialogVisible" width="30%" center>
    <!--        <span>{{this.noticeContent}}</span>-->
    <el-card class="el-dialog-div">&nbsp&nbsp我突然发现，所谓的坚强，不过是真正的不幸没有降临在自己头上。 --陈年喜《微尘》</el-card>
    <template #footer>
        <span class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false" :append-to-body="true">确 定</el-button>
        </span>
    </template>
</el-dialog>

• style代码如下。

<style>
    .el-dialog-div{
        height: 35vh;
        font-size: 20px;
        text-align: left;
        letter-spacing:0.15em;
        overflow: auto;
        display:table-cell;
        vertical-align:middle;
        border-top: 1px solid #ebebeb;
    }
    .dialog-footer{
        font-size: 20px;
    }
</style>

• script代码如下。

  created() {
    this.load()
  },
  methods:{
    load(){
      if (document.cookie.length > 0) {
        console.log("cookies: " + document.cookie)
        let arr = document.cookie.split('; ');//通过; 将数据转成数组
        for(let i=0;i<arr.length;i++){
          let index = arr[i].indexOf("=") //返回第一个“=”所在的位置
          if(arr[i].substring(0,index)==="time"){
            //cookie存在,将isExist设置为true
            this.isExist = true;
            break
          }
        }
      }
      // cookie不存在
      if (!this.isExist){
        this.dialogVisible = true;
        // 过期时间设置为次日凌晨
        let expiresTime = new Date();
        expiresTime.setTime(new Date().getTime() + 24*60*60*1000);
        expiresTime.setHours(0);
        expiresTime.setMinutes(0);
        expiresTime.setSeconds(0);
        window.document.cookie="time" + "=" + new Date() + ";path=/;expires=" + expiresTime;
      }
    }
  }