Toast 轻提示

介绍

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

引入

import { IBestToast } from "@ibestservices/ibest-ui";

代码演示

文字提示

点我查看代码

IBestToast.show("提示内容")

成功提示

点我查看代码

IBestToast.show({
    type: "success",
    message: "提示内容"
})

警告提示

点我查看代码

IBestToast.show({
    type: "warning",
    message: "提示内容"
})

失败提示

点我查看代码

IBestToast.show({
    type: "fail",
    message: "提示内容"
})

加载提示

点我查看代码

IBestToast.show({
    type: "loading",
    message: "提示内容"
})

自定义图标

点我查看代码

IBestToast.show({
    icon: $r("app.media.startIcon"),
    message: "提示内容"
})

自定义图片

点我查看代码

IBestToast.show({
    icon: "https://ibestui.ibestservices.com/favicon.ico",
    message: "提示内容"
})

自定义加载图标类型

点我查看代码

IBestToast.show({
    type: "loading",
    loadingType: "spinner",
    message: "加载中...",
        onOpened: () => {
        // 可在此延时关闭toast
        console.log("toast打开成功")
    }
})
setTimeout(() => {
    // 也可在此关闭toast
    IBestToast.hide()
}, 2000)

自定义位置

TIP

通过 position 属性可以自定义位置， 通过 offsetY 可设置偏移量。

点我查看代码

IBestToast.show({
    position: "top",
    offsetY: "20%",
    message: "提示内容"
})

文字换行方式

TIP

通过 wordBreak 属性可以设置文字换行方式。

点我查看代码

IBestToast.show({
    wordBreak: "break-all",
    message: "This message will contain a incomprehensibilities long word."
})

动态更新提示

点我查看代码

async showCountDownLoading(){
    let count = 3
    let toast = await IBestToast.show({
        type: "loading",
        message: `倒计时 ${count} 秒`,
        duration: 0
    })
    let timer = setInterval(() => {
        count--
        if (count) {
            toast.message = `倒计时 ${count} 秒`
        } else {
            clearInterval(timer)
            IBestToast.hide()
        }
    }, 1000)
}

API

方法名	说明	参数	返回值
show	展示提示	string | ToastParams	toast 实例
hide	隐藏提示	-	-

ToastParams 数据结构

调用 show 方法时，支持传入以下选项：

参数	说明	类型	默认值
type	展示类型，可选值为 success、warning、fail、loading	string	""
message	展示文本内容	string	""
duration	展示时长(ms)，值为 0 或 type为 loading 时toast 不会自动消失	number	1500
wordBreak	文本换行方式，可选值为 normal、break-all 、break-word	string	normal
icon	自定义图标，支持网络图片和本地图片，优先级大于type	string | Resource	""
isShowMask	是否显示遮罩	boolean	false
loadingType	加载图标类型，可选值为 circular、spinner，type为 loading 时有效	boolean	circular
position	位置，可选值为 top 、center、bottom	string	center
offsetY	偏移量	string | number	0
onOpened	完全展示后的回调函数	Function	-