Toast 轻提示

查看 sn-toast 的 2.0 版本差异

基础用法

轻提示（吐司），默认居中显示、2 秒后自动消失，可配置图标、加载状态与显示位置。

通过组件方法显示与关闭：可按组件配置显示，也可传入参数临时覆盖配置
默认不拦截手势，提示期间仍可操作页面；开启遮罩后可防穿透
加载状态下不自动关闭，需手动关闭

必须放在 sn-page 下

本组件为弹出层，需直接放在 sn-page 根节点下使用，否则主题颜色与动画时长等 CSS 变量无法作用到组件内部。

建议直接使用 API

推荐使用 snu.showToast：无需在页面放置组件或绑定 ref，任意位置可直接调用（snu.hideToast() 关闭），配置字段与组件 props 一致（组件的 overlay 对应 API 的 passThrough，默认均为不拦截手势）。组件本身不提供插槽，需先放置到页面再通过 ref 调用。

typescript

snu.showToast({ text: '保存成功', icon: 'success' })

snu.showToast({
	text: '加载中...',
	loading: true,
	duration: 3000
})

vue

<template>
	<sn-page>
		<sn-button text="显示轻提示" type="primary" @click="show"></sn-button>
		<sn-toast ref="toastEle" text="这是一个提示信息"></sn-toast>
	</sn-page>
</template>

更多演示请下载 demo 查看

属性

参数	说明	类型	默认值	可选值
text	提示文本内容	String	`''`	-
bgColor	轻提示背景颜色，支持 `$` 简写主题色	String	`$toast`	-
overlay	是否显示透明遮罩（防穿透），开启后提示期间拦截底部页面点击	Boolean	`false`	`true` \| `false`
position	轻提示位置	String	`center`	`top` \| `center` \| `bottom`
duration	轻提示显示时长（ms），`loading` 为 true 时不自动关闭	Number	`2000`	-
textSize	提示文本字体大小	String \| Number	`$14`	-
textColor	提示文本颜色，支持 `$` 简写主题色	String	`#fff`	-
borderRadius	轻提示圆角大小	String \| Number	`$12`	-
padding	轻提示内边距，支持 `$` 前缀按间距乘数缩放	String	`12px 15px`	-
icon	提示图标名称（sn-icon 图标名）	String	`''`	-
iconSize	图标大小	String \| Number	`$20`	-
iconColor	图标颜色，支持 `$` 简写主题色（`loading` 圈的描边色同样取此颜色）	String	`#fff`	-
textAlign	文本对齐方式	String	`center`	`left` \| `center` \| `right`
loading	是否显示加载中图标（旋转 loading 圈）	Boolean	`false`	`true` \| `false`
textLines	文本最大行数，超长自动换行，`0` 不限制	Number	`0`	-
customStyle	自定义轻提示内容块样式	SnStyleValue	`''`	-

方法

名称	参数	返回值	描述
show	-	-	按组件 props 配置显示轻提示
configShow	param: SnToastParams \| null	-	按传入参数显示轻提示，参数缺省字段回退组件 props 配置，无需改动属性
close	-	-	关闭轻提示（`loading` 状态下必须通过此方法关闭）

sn-toast 组件参数型轻提示的配置，见组件类型。

Toast 轻提示 ​

基础用法 ​

属性 ​

方法 ​

Toast 轻提示

基础用法

属性

方法