Skip to content

Toast 轻提示

基本用法

需要在页面中引入该组件,作为挂载点。

html
<wd-toast />
<wd-button @click="showToast">toast</wd-button>
typescript
import { useToast } from '@/uni_modules/wot-design-uni'

const toast = useToast()

function showToast() {
  toast.show('提示信息')
}

成功、异常、警告、常规

typescript
toast.show('提示信息')
toast.success('操作成功')
toast.error('手机验证码输入错误,请重新输入')
toast.warning('提示信息')
toast.info('常规提示信息')

使用图标

可以使用iconClass指定图标,结合classPrefix可以使用自定义图标,参见 Icon 自定义图标

ts
// 使用组件库内部图标
toast.show({
  iconClass: 'star',
  msg: '使用组件库内部图标'
})
ts
// 使用自定义图标
toast.show({
  iconClass: 'kehuishouwu',
  classPrefix: 'fish',
  msg: '使用自定义图标'
})

提示位置

typescript
// 顶部提示
toast.show({
  position: 'top',
  msg: '提示信息'
})

// 底部提示
toast.show({
  position: 'bottom',
  msg: '提示信息'
})

关闭提示

typescript
toast.close()

loading 提示

loading 开启后需要用户手动关闭,关闭可以调用 close,或者再调用一次 toast 提示,因为 toast 只会存在一个,新的 toast 会自动顶掉旧的 toast。

typescript
toast.loading('加载中...')

修改 loading 指示器类型:

typescript
toast.loading({
  loadingType: 'ring',
  msg: '加载中...'
})

手动关闭 loading:

typescript
toast.close()

Attributes

参数说明类型可选值默认值最低版本
options配置项,可以直接传入字符串作为提示信息string / object---

options

参数说明类型可选值默认值最低版本
msg消息内容string---
duration持续时间,单位 ms,为 0 时表示不自动关闭number-2000-
iconName图标类型stringsuccess / error / warning--
iconSize左侧图标尺寸string---
iconClass图标类目,自定义图标,可以使用 Icon 章节的那些图标类名,iconName 优先级更高string---
classPrefix类名前缀,用于使用自定义图标string---
position提示信息框的位置stringtop / middle / bottommiddle-
zIndextoast 层级number-100-
loadingType加载中图标类型stringringoutline-
loadingColor加载中图标颜色string-#4D80F0-
selector指定唯一标识string---
cover是否存在一个透明遮罩boolean-loading时默认为 true1.2.15
opened完全展示后的回调函数Function--1.2.15
closed完全关闭后的回调函数Function--1.2.15

Methods

方法名称说明参数最低版本
success成功提示options-
error错误提示options-
info常规提示options-
warning警告提示options-
loading加载提示options-
close手动关闭消息提示框,是 Toast 实例上的方法--

外部样式类

类名说明最低版本
custom-class根节点样式-

Released under the MIT License.

Released under the MIT License.