Toast 轻提示

介绍

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

函数调用

为了便于使用 Toast，提供了 showToast、closeToast 函数，用于显示和关闭 Toast，可设置标识指定一个 Toast 组件调用。

WARNING

因小程序无法动态挂载组件，使用时需要页面存在一个 Toast 组件，且函数调用方法需要在 onLoad 生命周期后调用。

<vd-toast name="page" />

import { showToast } from 'vital-design';

showToast('提示内容');

// 指定一个 Toast 调用
showToast({ name: 'page', message: '提示内容' });

基础用法

通过设置 type 属性来设置提示类型，默认为 default。

<vd-toast name="page" />

import { showToast } from 'vital-design';

showToast({ name: 'page', message: '文字提示' });
showToast({ name: 'page', type: 'info', message: '信息提示' });
showToast({ name: 'page', type: 'success', message: '成功提示' });
showToast({ name: 'page', type: 'warning', message: '警告提示' });
showToast({ name: 'page', type: 'error', message: '失败提示' });
showToast({ name: 'page', type: 'loading', message: '加载中提示' });

自定义图标

通过设置 icon 属性来设置提示图标。

<vd-toast name="page" />

import { showToast } from 'vital-design';

showToast({ name: 'page', icon: 'star', message: '提示消息' });
showToast({ name: 'page', icon: 'love', message: '提示消息' });
showToast({ name: 'page', icon: 'clock', message: '提示消息' });

行内展示

通过设置 inline 属性来设置提示是否为行内展示。

default、loading 提示默认为块级展示，其他类型提示默认为行内展示。

<vd-toast name="page" />

import { showToast } from 'vital-design';

showToast({ name: 'page', icon: 'clock', message: '提示消息', inline: true });
showToast({ name: 'page', type:'loading', message: '成功提示', inline: true });

弹出位置

通过设置 position 属性来设置提示弹出位置，默认为 center。

<vd-toast name="page" />

import { showToast } from 'vital-design';

// 中间提示
showToast({ name: 'page', message: '提示消息' });
// 上方提示
showToast({ name: 'page', message: '提示消息', position: 'top' });
// 下方提示
showToast({ name: 'page', message: '提示消息', position: 'bottom' });

自定义动画

通过 transition 属性来设置自定义弹出动画，动画名称参考 Transition 组件。

<vd-toast name="page" />

import { showToast } from 'vital-design';

showToast({ name: 'page', message: '提示消息', transition: 'zoom-in' });

动态更新

可重复调用 showToast 方法来更新提示内容。

<vd-toast name="page" />

import { showToast, closeToast } from 'vital-design';

showToast({ name: 'page', message: '倒计时 3 秒', duration: 0 });

let count = 3;
const timer = setInterval(() => {
  if (--count <= 0) {
    clearInterval(timer);
    closeToast('page');
    return;
  }

  showToast({ name: 'page', message: `倒计时 ${count} 秒` });
}, 1000);

API

Props

参数	说明	类型	默认值
v-model	是否展示	boolean	false
name	标识名称	string	-
type	提示类型	ToastType	'default'
position	弹出位置	ToastPosition	'center'
message	提示内容	string	-
inline	是否一行排列样式	boolean	-
icon	提示图标	IconsName	-
icon-size	提示图标大小	string | number	块级：36、加载中：30、行内：22
transition	弹出动画	TransitionName	'fade'
duration	显示时长(ms)，值为 0 时，toast 不会消失	string | number	2000
overlay	是否显示遮罩	boolean	-
overlay-class	遮罩类名	ClassValue	-
overlay-style	遮罩样式	StyleValue	-
forbid-click	是否禁止背景点击	boolean	加载中：true、其他：false
loading-type	加载中类型	LoadingType	同 Loading 组件
z-index	层级	number	2001+

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
open	打开时触发	-
opened	打开动画结束时触发	-
close	关闭时触发	-
closed	关闭动画结束时触发	-
click-overlay	点击遮罩时触发	MouseEvent

Slots

名称	说明
default	自定义内容
icon	图标
message	消息内容