轻提示 Toast

介绍

Toast 组件常用于在页面中展示重要的提示信息。

使用指南

无文字基本类型

<tms-toast show="{{true}}" title="这是一条基础提示框" />
<tms-toast show="{{true}}" title="这是一条基础提示框，这是一条基础提示框" />

icon(tms-icon) + 文本内容的提示框

<tms-toast show="{{true}}" icon="success" title="成功提示框" />

自定义图片的提示框

<tms-toast show="{{true}}" tms-image-class="image-class"
           image="https://static.img.tai.qq.com/mp/tmsui/icon/checkbox-active.svg" title="成功提示框" />

更改文字的位置

<tms-toast show="{{true}}" icon="success" title="成功提示框" placement="right" />
<tms-toast show="{{true}}" icon="success" title="成功提示框" placement="left" />
<tms-toast show="{{true}}" icon="success" title="成功提示框" placement="top" />

:::

API

属性	说明	类型	默认值	版本
show	控制提示框的显示	Boolean	true
title	提示框的内容	string
icon	tms-icon 的图标名称	string
image	图片的有效路径	String
placement	文字的显示方位	string	top/left/right/bottom
duration	文字的显示方位	string	top/left/right/bottom
placement	提示框的显示时长	Number	1500
zIndex	控制提示框的 zIndex层级	Number	700
mask	是否显示蒙层	Boolean	false
offsetX	提示框向右的偏移量	Number	0
offsetY	提示框向下的偏移量	Number	0

提示框外部样式类

属性	说明	类型
tms-class	覆盖toast整体的外部样式类	---
tms-bg-class	覆盖背景部分的外部样式类	---
tms-image-class	覆盖toast图片部分的外部样式类	---
tms-title	覆盖toast文字的外部样式类 ---	---

FAQ