轻提示 Toast

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

使用

API

安装使用

备注

小程序在机制上不允许动态插入 DOM。

因此，需要在外层先引入 <ti-toast id="titian-toast" /> 组件，再使用 js 方法展示该组件。

index.json

{
  // 原生小程序
  "usingComponents": {
    "ti-toast": "@titian-design/weapp/toast/index"
  },
  // titan-cli 搭建的项目
  "usingComponents": {
    "ti-toast": "platform://titian-mp/ti-toast"
  }
}

index.js

// 原生小程序
import { $tiToast } from "@titian-design/weapp/index";

// titan-cli 搭建的项目
const { $tiToast } = requirePlatform("@titian-design/weapp").main;

index.wxml

<ti-toast id="titian-toast" />

用法示例

基本用法

$tiToast.info("这是一条轻提示！");

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

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

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

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

使用 Selector

备注

selector: 用作 selectComponent API 的参数；指定 <ti-toast> 元素的 id，默认为 titian-toast。

ctx: 指定 selector 选择器的上下文范围。

$tiToast.loading({
  selector: "#titian-toast",
  text: "这是一条加载提示！",
  duration: 2000
  
});

$tiToast.loading({
  ctx: this,
  selector: "#titian-toast",
  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 数据结构

名称	类型	必填	默认值	说明	备注
text	number	否	100	文本
z-index	number	否	30000	z-index 层级
duration	number	否	2000	展示时长	-
color	string	否	#fff	颜色	-
icon	string	否	-	轻提示 icon	-
finished-callback	Function	否	0	回调	-

CSS 变量 CSS Variables

CSS 变量	默认值	说明
--toast-popup-mask-bg-color	同 Popup 组件 --popup-mask-bg-color	-
--toast-popup-radius	同 Popup 组件 --popup-popup-radius	-
--toast-popup-box-bg-color	同 Popup 组件 --popup-box-bg-color	-
--toast-bg-color	容器背景色	-
--toast-content-padding	16px 36px	icon模式下内容区域内边距
--toast-text-line-height	36px	icon 模式下文字行度
--toast-status-gap	icon 与文本之间间距	-
--toast-text-color	文本区颜色	-