useToast

显示或隐藏消息提示框

何时使用

当需要使用消息提示框

API

const { show, hide } = useToast(initialOption);

参数说明

initialOption: ToastOption

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

参数	说明	类型	默认值
title	提示的内容	string	-
duration	提示的延迟时间	number	-
icon	图标	"success" or "error" or "loading" or "none"	-
image	自定义图标的本地路径，image 的优先级高于 icon	string	-
mask	是否显示透明蒙层，防止触摸穿透	boolean	-

返回值说明

返回值	说明	类型
show	显示消息提示框	PromiseOptionalAction<ToastOption>
hide	隐藏提示框	PromiseWithoutOptionAction

代码演示

React

feedback/useToast/index

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

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

  const handleChangeOption = () => {
    show({
      icon: 'error',
      title: '点击隐藏按钮进行隐藏',
      duration: 3000000,
    });
  };

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

Vue

feedback/useToast/index

<template>
  <demo-content>
    <nut-button shape="square" type="primary" class="gap" block @click="show()"
      >展示带初始配置的Toast</nut-button
    >
    <nut-button
      shape="square"
      type="primary"
      class="gap"
      block
      @click="handleChangeOption()"
      >展示新配置的Toast</nut-button
    >
    <nut-button shape="square" type="primary" block @click="hide()"
      >隐藏新配置的Toast</nut-button
    >
  </demo-content>
</template>

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

const { show, hide } = useToast({ title: 'initial title' });

const handleChangeOption = () => {
  show({
    icon: 'error',
    title: '点击隐藏按钮进行隐藏',
    duration: 3000000,
  });
};
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️	✔️	✔️