提示 useToast

更新: 2025/1/6 字数: 0 字 时长: 0 分钟

基本使用

说明

useToast 改造于van-toast组件，在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。

文字提示

toast 函数在屏幕中间展示一条文字提示。

import useToast from "@/hooks/useToast";
const { toast } = useToast();

点击查看示例代码

<van-button @click="toast('提示')"> 文字提示 </van-button>

加载提示

loadingToast 函数展示加载提示，默认不可点击背景。

import useToast from "@/hooks/useToast";
const { loadingToast } = useToast();

点击查看示例代码

<van-button @click="loadingToast()"> 加载提示 </van-button>

成功/失败提示

successToast 函数展示成功提示，failToast 函数展示失败提示。

import useToast from "@/hooks/useToast";
const { successToast, failToast } = useToast();

点击查看示例代码

<van-button @click="successToast()"> 成功提示 </van-button>
<van-button @click="failToast()"> 失败提示 </van-button>

关闭提示

closeAllToast 函数关闭当前提示，传参false为关闭单个，true为关闭所有

import useToast from "@/hooks/useToast";
const { closeAllToast } = useToast();

点击查看示例代码

<script setup lang="ts">
import useToast from "@/hooks/useToast";
const { loadingToast, closeAllToast } = useToast();
function dynamicToast() {
  const toasts = loadingToast("倒计时3秒", {
    duration: 0,
  });

  let second = 3;
  const timer = setInterval(() => {
    second--;
    if (second) {
      toasts.message = `倒计时 ${second} 秒`;
    } else {
      clearInterval(timer);
      closeAllToast();
    }
  }, 1000);
}
</script>
<template>
  <van-button @click="dynamicToast"> 动态更新提示 </van-button>
</template>

自定义提示

toast 函数可以传入params参数，用于自定义提示。

<script setup lang="ts">
import useToast from "@/hooks/useToast";
const { toast, loadingToast, successToast, failToast, closeAllToast } =
  useToast();
const customMsg =
  '<i class="van-icon van-icon-passed" style="color:#13DEA5;margin-right:5px"></i>' +
  "<span>这是一段html</span>";
</script>
<template>
  <van-button @click="toast(customMsg, { type: 'html' })">
    自定义HTML内容
  </van-button>
  <van-button @click="toast('自定义图标', { icon: 'like-o' })">
    自定义图标
  </van-button>
  <van-button @click="loadingToast('加载中', { loadingType: 'spinner' })">
    自定义加载图标
  </van-button>
  <van-button @click="toast('顶部提示', { position: 'top' })">
    自定义位置
  </van-button>
  <van-button
    @click="
      toast('3秒后关闭', {
        duration: 3000,
        onClose: () => successToast('消息已关闭'),
      })
    "
  >
    自定义延时后其他操作
  </van-button>
</template>

API

方法

方法	说明	类型
toast	展示文字提示	(message: string, params?: ToastParams) => ToastReturn
loadingToast	展示加载提示	(message?: string, params?: ToastParams) => ToastReturn
successToast	展示成功提示	(message?: string, params?: ToastParams) => ToastReturn
failToast	展示失败提示	(message?: string, params?: ToastParams) => ToastReturn
closeAllToast	关闭提示，closeAll为false表示关闭单个，为true表示关闭所有	(closeAll?: boolean) => void

toast详解

它接收两个参数，如下

参数名	说明	类型
message	文本内容，支持通过 \n 换行	string
params	消息提示的配置参数，见下表	ToastParams

类型声明

import type { TeleportProps } from "vue";

type Numeric = string | number;
type ToastType = "text" | "loading" | "success" | "fail" | "html";
type ToastPosition = "top" | "middle" | "bottom";
type ToastWordBreak = "break-all" | "break-word" | "normal";
type LoadingType = "circular" | "spinner";
interface ToastOptions {
  /** 自定义图标，支持传入图标名称或图片链接，等同于 Icon 组件的 name 属性 */
  icon?: string;
  /** 图标大小，如 20px 2em，默认单位为 px */
  iconSize?: Numeric;
  /** 图标类名前缀，等同于 Icon 组件的 class-prefix 属性，默认van-icon */
  iconPrefix?: string;
  /** 提示类型，可选值为 loading success fail html，默认text */
  type?: ToastType;
  mask?: boolean;
  /** 是否显示背景遮罩层，默认false */
  overlay?: boolean;
  /** 展示时长(ms)，值为 0 时，toast 不会消失，默认2000 */
  duration?: number;
  /** 指定挂载的节点，等同于 Teleport 组件的 to 属性，默认body */
  teleport?: TeleportProps["to"];
  /** 位置，可选值为 top bottom 默认值middle */
  position?: ToastPosition;
  /** 自定义类名 */
  className?: unknown;
  /** 动画类名，等价于 transition 的name属性，默认van-fade */
  transition?: string;
  /** 文本内容的换行方式，可选值为 normal break-all break-word，默认break-all */
  wordBreak?: ToastWordBreak;
  /** 加载图标类型, 可选值为 spinner，默认circular */
  loadingType?: LoadingType;
  /** 是否禁止背景点击，默认false */
  forbidClick?: boolean;
  /** 是否在点击后关闭，默认false */
  closeOnClick?: boolean;
  /** 自定义遮罩层类名 */
  overlayClass?: unknown;
  /** 自定义遮罩层样式 */
  overlayStyle?: Record<string, any>;
  /** 是否在点击遮罩层后关闭，默认false */
  closeOnClickOverlay?: boolean;
  /** 将组件的 z-index 层级设置为一个固定值 */
  zIndex?: Numeric;
  /** 关闭时的回调函数 */
  onClose?: () => void;
  /** 完全展示后的回调函数 */
  onOpened?: () => void;
}