youzan / vant

A lightweight, customizable Vue UI library for mobile web apps.

Home Page:https://vant-ui.github.io/vant/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Feature Request] 类似弹窗这种组件,点击返回按钮不会跳转页面,只关闭弹窗

mrbin1573 opened this issue · comments

这个功能解决了什么问题?

页面出现弹窗时,点击返回按钮,想要的是只关闭弹窗。而不是关闭弹窗并且返回上一个页面。直接返回了体验不好。添加一个类似 just-close-on-nativeback的属性,在用户点击原生返回按键时,只会关闭弹窗

你期望的 API 是什么样子的?

<van-popup just-close-on-nativeback>
</van-popup>

<van-dialog  just-close-on-nativeback>
</van-dialog>

我通过封装路由守卫实现了这个功能,但是使用起来不方便,每次都要调用一下。

let showWindow = ref(false)
usePopupBack(showWindow )

/**
 * @description: 浏览器返回时关闭弹窗
 * @param {ref} showValue 控制弹窗显示的响应式字段
 * @param {Function} closeFun 可选,关闭弹窗的方法,不传默认showValue.value = false
 */
export default (showValue, closeFun) => {
  router.beforeEach((to, from, next) => {
    if (showValue.value) {
      next(false)
      !!closeFun ? closeFun() : (showValue.value = false)
    } else {
      next()
    }
  })
}

用函数的方式使用的组件还要单独用一个变量来控制,
所以我想能不能在你们的组件里实现这个功能,只需要一个参数就能控制

页面出现弹窗时,不是应该不能出现 出现点击返回按钮么,正常逻辑应该是这样。。。

页面出现弹窗时,不是应该不能出现 出现点击返回按钮么,正常逻辑应该是这样。。。

手机物理返回

暂时没有计划在组件内部增加操作路由的逻辑,这个能力建议自行封装下哈

组件本身是不感知到外部的 router 实例的,也无法区分外部是使用了 vue-router 还是其他路由方式,因此比较难提供一个统一的解决方案。