跳到主要内容

轻提示 Toast

用于交互提示、加载结果等场景。

用法示例

基本用法

const toast = window.TitianH5Basic.$tiToast
toast.info("这是一条轻提示!");

toast.warn({
text: "这是一条警告提示!",
duration: 2000,
});

toast.success({
text: "这是一条成功提示!",
duration: 2000,
});

toast.fail({
text: "这是一条失败提示!",
duration: 2000,
});

toast.loading({
text: "这是一条加载提示!",
duration: 2000,
});

ti-toast API

方法 Methods

方法名说明参数返回值
$tiToast.success展示成功提示ToastOptions | string-
$tiToast.warn展示警告提示ToastOptions | string-
$tiToast.fail展示失败提示ToastOptions | string-
$tiToast.loading展示加载提示ToastOptions | string-
$tiToast.info展示文本ToastOptions | string-
$tiToast.clear清除提示--

ToastOptions 数据结构

名称类型必填默认值说明备注
textnumber100文本
z-indexnumber30000z-index 层级
durationnumber2000展示时长-
colorstring#fff颜色-
iconstring-轻提示 icon-
finished-callbackFunction0回调-

CSS 变量 CSS Variables

CSS 变量默认值说明
--toast-popup-mask-bg-colorPopup 组件 --popup-mask-bg-color-
--toast-popup-radiusPopup 组件 --popup-popup-radius-
--toast-popup-box-bg-colorPopup 组件 --popup-box-bg-color-
--toast-bg-color容器背景色-
--toast-content-padding16px 36pxicon模式下内容区域内边距
--toast-text-line-height36pxicon 模式下文字行度
--toast-status-gapicon 与文本之间间距-
--toast-text-color文本区颜色-