useToast

用于便捷地调用 Toast 轻提示组件。

基本用法

需要在页面中引入 wd-toast 组件作为挂载点。

html

<wd-toast />
<wd-button @click="showToast">toast</wd-button>

import { useToast } from '@/uni_modules/wot-design-uni'

const toast = useToast()

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

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

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

// 使用组件库内部图标
toast.show({
  iconClass: 'star',
  msg: '使用组件库内部图标'
})

// 使用自定义图标
toast.show({
  iconClass: 'kehuishouwu',
  classPrefix: 'fish',
  msg: '使用自定义图标'
})

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

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

修改 loading 指示器类型：

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

手动关闭 loading:

toast.close()