Skip to content
On this page

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('常规提示信息')

提示位置

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-42px-
iconClass图标类目,自定义图标,可以使用 Icon 章节的那些图标类名,iconName 优先级更高string---
customIcon自定义图标,开启后可以通过 custom-icon-class 类名自定义图标Boolean-false-
position提示信息框的位置stringtop / middle / bottommiddle-
zIndextoast 层级number-100-
loadingType加载中图标类型stringringoutline-
loadingColor加载中图标颜色string-#4D80F0-

Methods

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

外部样式类

类名说明最低版本
custom-class根节点样式-
custom-icon-class自定义图标类名-

Released under the MIT License.

Released under the MIT License.