h5移动端实现物理返回键关闭弹框而非返回上一级页面

最新推荐文章于 2023-10-25 10:47:50 发布

Terminal丶句点

最新推荐文章于 2023-10-25 10:47:50 发布

阅读量2.6k

点赞数 1

分类专栏： vue3 vite uniapp 文章标签： vue

本文链接：https://blog.csdn.net/qq_40026668/article/details/124034768

版权

本文介绍了一种使用Vue解决移动端H5页面中，如何通过物理返回键关闭popup弹框而不是返回上一页面的方法。主要步骤包括在打开弹框时向history添加空记录，监听popstate事件来关闭弹框，以及在用户主动关闭弹框时清除监听事件。

摘要由CSDN通过智能技术生成

需求：页面中的popup弹框，可以通过物理返回键进行关闭
方案：
（1）当打开弹框时，向history中添加一个空记录，并且监听history的popstate变化
（2）当弹框打开状态用户操作了返回上一级页面，会触发监听事件，关闭弹框
（3）当弹框打开状态用户通过状态值（比如popup中有个取消按钮）关闭了弹框，要把监听事件清除
实现

// vue3 setup模式
import {
    useEventListener } from '@vueuse/core'

//页面中点击打开弹框按钮时，执行此方法
const addBackListener = ()</

关注