import{c as t,o as d,A as o}from"./vendor.80bf15c7.js";const r={class:"markdown-body"},a=o('

Toast 吐司

轻提示。

介绍

用于轻提示。

安装

import { createApp } from 'vue';\nimport { Toast } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Toast);\n

代码演示

基本用法

文字提示

Toast.text(msg);\n

成功提示

Toast.success(msg);\n

失败提示

Toast.fail(msg);\n

警告提示

Toast.warn(msg);\n

动态更新

Toast.loading(msg, { duration: 0, id: 'test' });\nsetTimeout(() => {\n  Toast.success('加载完成', { id: 'test', duration: 2000 });\n}, 2000);\n

##¥ 支持在JS模块中导入使用

import { Toast } from "@nutui/nutui";\nToast.text('在js模块中使用');\n// 返回实例,可以手动调用实例中的hide方法关闭提示\nconst toast = Toast.loading('在js模块中使用');\ntoast.hide();\n

API

方法名说明参数返回值
Toast.text展示文字提示options/messagetoast 实例
Toast.success展示成功提示options/messagetoast 实例
Toast.fail展示失败提示options/messagetoast 实例
Toast.warn展示警告提示options/messagetoast 实例
Toast.hide关闭提示force:booleanvoid
Toast.loading展示加载提示options/messagetoast 实例

Options

字段说明类型默认值
msg消息文本内容,支持传入HTMLString/VNode“”
id标识符,相同者共用一个实例
loading类型默认使用一个实例,其他类型默认不共用
String/Number-
duration展示时长(毫秒)
值为 0 时,toast 不会自动消失(loading类型默认为0)
Number2000
center是否展示在页面中部(为false时展示在底部)Booleantrue
bottom距页面底部的距离(像素),option.center为false时生效Number30
textAlignCenter多行文案是否居中Booleantrue
bgColor背景颜色(透明度)String“rgba(46, 46, 46, 0.7)”
customClass自定义类名String“”
icon自定义图标,支持图片链接或base64格式String“”
size文案尺寸,small/base/large三选一String“base”
cover是否显示遮罩层,loading类型默认显示Booleanloading类型true/其他类型false
coverColor遮罩层颜色,默认透明String“rgba(0,0,0,0)”
loadingRotateloading图标是否旋转,仅对loading类型生效Booleantrue
onClose关闭时触发的事件functionnull
closeOnClickOverlay是否在点击遮罩层后关闭提示Booleanfalse
toastStyle提示框styleobject{}
toastClass提示框classString“”
',24),s={expose:[],setup:o=>(o,s)=>(d(),t("div",r,[a]))};export default s;