back-pop_yh

说明

基于vue-router + vue3 实现的挽回弹窗hook，支持首页/非首页挽回弹窗、支持用户自定义弹窗，支持回退时前置进行逻辑判断是否展示挽回弹窗，支持页面未销毁弹窗只弹一次/每次回退都进行弹窗

注意

若页面使用了路由守卫，页面引入该hook的位置必须在页面声明的路由守卫之后

安装

npm i back-pop_yh

出入参说明

入参 options?:IOptions

不传参数则表示: 非首页挽回弹窗&回退时展示挽回弹窗&弹窗只展示一次

interface IOptions {
  /**
   * 是是首页弹窗，若为true，则表示首页弹窗，若为false，则表示为非首页弹窗
   * 默认值：false，默认是非首页弹窗
   */
  firstPage?: boolean;

  /**
   * 是否在页面内只展示一次（用户未离开当前页面）
   * 此参数与firstPage为false时搭配使用，若是首页弹窗不需要传递此参数
   * 默认值：true，弹窗展示一次后就不会展示了，除非重新进入了使用当前hooks的页面
   */
  showOnce?: boolean;

  /** 传入的回退时的前置处理事件，不传则默认展示弹窗
   * callBack的返回值为true时需要展示挽回弹窗，为false则不需要展示挽回弹窗
   * 首页挽回弹窗需若不需要展示挽回弹窗，则需要在callBack中进行关闭webView操作
   */
  callBack?: () => boolean | Promise<boolean>;
}

出参 return:IReturn

interface IReturn {
  /** 是否展示挽回弹窗
   * 若用户点击「退出」，则backPop要保持为true，若用户点击「留在当前页」，则backPop要设置为false
   */
  showBackPop: Ref<boolean>;

  /** 若首页需要实现展示多次挽回弹窗，则需要在确认留在页面时调用该方法 */
  pushHomeUrl: () => void;
}

使用案例

案例共有弹窗代码

watch(
  () => showBackPop.value,
  () => {
    if (showBackPop.value) {
      showConfirmDialog({
        /** 这个配置不加在 beforeRouteLeave 里调用 Dialog 无法展示 */
        closeOnPopstate: false,
        title: '确定要退出？',
        message: '还有更多利率低额度高的贷款产品可以申请哦',
        confirmButtonText: '继续看看',
        cancelButtonText: '残忍离开',
        beforeClose: (action) => {
          if (action === 'confirm') {
            showBackPop.value = false;
          } else {
            window.history.go(-1);
          }
          closeDialog();
        },
      });
    }
  },
);

首页弹窗（弹窗只弹出一次）

import useBackPop from 'back-pop_yh';
const { showBackPop } = useBackPop({
  firstPage: true,
});

首页弹窗（每次回退都弹出）

import useBackPop from 'back-pop_yh';
const { showBackPop, pushHomeUrl } = useBackPop({
  firstPage: true,
});

//与首页弹窗（弹窗只展示一次）不同点在弹窗内确认逻辑上添加一行代码：pushHomeUrl()
if (action === 'confirm') {
  showBackPop.value = false;
  pushHomeUrl();
}

非首页挽回弹窗（弹窗只弹出一次）

import useBackPop from 'back-pop_yh';
const { showBackPop } = useBackPop();

非首页挽回弹窗（每次回退都弹出）

import useBackPop from 'back-pop_yh';
const { showBackPop } = useBackPop({
  showOnce: false
});

回退前进行前置逻辑判断

无论是首页挽回弹窗还是非首页挽回弹窗加上callBack配置入参，都可以前置进行逻辑处理

const handleBack = async () => {
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('');
    }, 500);
  });
  // 如果首页挽回弹窗不需要展示是关闭，则在这里个方法里写关闭webView的方法
  return true
};
const { showBackPop } = useBackPop({
  callBack: handleBack
});