跳到主要内容

useModal

显示模态对话框

何时使用​

当需要使用模态对话框

API​

const show = useModal(initialOption);

参数说明​

initialOption: ShowModalOption​

初始提示框配置(若指定后面可与新的配置合并)

参数说明类型默认值
title提示的标题string-
content提示的内容string-
showCancel是否显示取消按钮boolean-
confirmText确认按钮的文字，最多 4 个字符string-
confirmColor确认按钮的文字颜色，必须是 16 进制格式的颜色字符串string-
cancelText取消按钮的文字，最多 4 个字符string-
cancelColor取消按钮的文字颜色，必须是 16 进制格式的颜色字符串string-

返回值说明​

返回值说明类型
show显示消息提示框PromiseOptionalAction<ShowModalOption, Taro.showModal.SuccessCallbackResult>

SuccessCallbackResult​

返回值说明类型
cancel为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）boolean
confirm为 true 时，表示用户点击了确定按钮boolean

代码演示​

feedback/useModal/index
import React from 'react';
import { useModal } from 'taro-hooks';
import DemoContent from '@src/components/DemoContent';
import { Button } from '@taroify/core';

export default () => {
  const show = useModal({ title: 'initial title', content: 'initial content' });

  const handleChangeOption = () => {
    show({
      title: 'taro-hooks-next',
      content: '你相信光么!',
      showCancel: false,
      confirmText: '当然!',
    });
  };

  return (
    <DemoContent>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() => show()}
        shape="square"
      >
        展示带初始配置的Modal
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={handleChangeOption}
        shape="square"
      >
        展示新配置的Modal
      </Button>
    </DemoContent>
  );
};

Hook 支持度​

微信小程序H5ReactNative
✔️✔️✔️