实习需求-sessionStorage实现对话框只弹出一次

最新推荐文章于 2024-09-06 09:08:04 发布

yum191001

最新推荐文章于 2024-09-06 09:08:04 发布

阅读量459

点赞数

分类专栏：实习需求文章标签：前端 vue.js

本文链接：https://blog.csdn.net/yuqmn/article/details/111387249

版权

实习需求专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

背景
实现思路
实现代码

背景

某功能页面下线，需要提供一个弹窗来提示用户该功能已下线
要求：弹窗只是在进入该页面的时候显示，切换其他的页面再回到该页面，弹窗不显示，即弹窗只在第一次点击该功能页面出现

实现思路

弹窗：element-ui或者antd中的dialog，参考官方api即可
弹窗只出现一次，使用sessionStorage去控制dialog的visible

实现代码

在入口文件中定义并设置sessionStorage

const sessionStorage = window.sessionStorage;
sessionStorage.setItem('dialogVisible', 1);

定义dialog

<el-dialog
   title="提示"
   :visible.sync="dialogVisible"
   show-close
   width="30%"
   center
>
   <span>内容分析已于2020-12-15日停止维护，需要继续使用该功能，可以跳转至内容中台，辛苦老铁！</span>
   <p>内容中台地址：<a href="https://k-content.corp.kuaishou.com/#/?queryType=DEVICE" class="alink">https://k-content.corp.kuaishou.com/#/?queryType=DEVICE</a></p>
   <span slot="footer" class="dialog-footer">
       <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
   </span>
</el-dialog>

通过sessionStorage控制dialog
dialogVisible的初始值设为false，判断sessionStorage的值，如果==1，则显示对话框，并且sessionStorage设为0，如果sessionStorage不为1就直接将对话框设置为false
这里注意，sessionStorage设置的值会默认为string类型的，所以不能将sessionStorage的值直接赋值给dialogVisible，否则dialogVisible的值永远都是true

mounted() {
    if(sessionStorage.getItem("dialogVisible") == 1){
        this.dialogVisible = true;
        sessionStorage.setItem("dialogVisible", 0);
    } else {
        this.dialogVisible = false;
    }
},