useAlertBeforeUnload

小程序页面返回询问对话框

何时使用

当需要在小程序页面返回询问对话框时

API

const { enable, disable } = useAlertBeforeUnload();

参数说明

无

返回值说明

参数	类型	说明
enable	PromiseAction<string>	开启小程序页面返回询问对话框
disable	PromiseWithoutOptionAction	关闭小程序页面返回询问对话框

代码演示

React

feedback/useAlertBeforeUnload/index

import React from 'react';
import { useAlertBeforeUnload } from 'taro-hooks';

import { useDidShow } from '@tarojs/taro';
import DemoContent from '@src/components/DemoContent';
import { Button } from '@taroify/core';

export default () => {
  const { enable, disable } = useAlertBeforeUnload();

  useDidShow(() => {
    enable('您要离开此页面吗?');
  });

  return (
    <DemoContent>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() => disable()}
        shape="square"
      >
        取消离开页面弹窗
      </Button>
    </DemoContent>
  );
};

Vue

feedback/useAlertBeforeUnload/index

<template>
  <demo-content>
    <nut-button
      shape="square"
      type="primary"
      class="gap"
      block
      @click="disable()"
      >取消离开页面弹窗</nut-button
    >
  </demo-content>
</template>

<script setup lang="ts">
import { useAlertBeforeUnload } from 'taro-hooks';

import { useDidShow } from '@tarojs/taro';

const { enable, disable } = useAlertBeforeUnload();

useDidShow(() => {
  enable('您要离开此页面吗?');
});
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️