Toast 提示框

一种轻量级反馈/提示，可以用来显示不会打断用户操作的内容，适合用于页面转场、数据交互的等场景中。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Toast",
  3.     "usingComponents": {
  4.         "wux-button": "../../dist/button/index",
  5.         "wux-toast": "../../dist/toast/index"
  6.     }
  7. }

示例

!> 该组件主要依靠 JavaScript 主动调用，所以一般只需在 wxml 中添加一个组件，并设置 id 为 #wux-toast 或其他，之后在 page.js 中调用 $wuxToast(id) 获取匹配到的第一个组件实例对象。

  1. <wux-toast id="wux-toast" />
  3. <view class="page">
  4.     <view class="page__hd">
  5.         <view class="page__title">Toast</view>
  6.         <view class="page__desc">提示框</view>
  7.     </view>
  8.     <view class="page__bd page__bd_spacing">
  9.         <wux-button block type="light" bind:click="showToast">Success</wux-button>
  10.         <wux-button block type="light" bind:click="showToastCancel">Cancel</wux-button>
  11.         <wux-button block type="light" bind:click="showToastErr">Forbidden</wux-button>
  12.         <wux-button block type="light" bind:click="showToastText">Text</wux-button>
  13.         <wux-button block type="light" bind:click="showToastIcon">Custom Icon</wux-button>
  14.         <wux-button block type="light" bind:click="showToastReturn">Use return value to close</wux-button>
  15.         <wux-button block type="light" bind:click="showToastPromie">Use promise to know when closed</wux-button>
  16.     </view>
  17. </view>
  1. import { $wuxToast } from '../../dist/index'
  3. Page({
  4.     data: {},
  5.     onLoad() {},
  6.     showToast() {
  7.         $wuxToast().show({
  8.             type: 'success',
  9.             duration: 1500,
  10.             color: '#fff',
  11.             text: '已完成',
  12.             success: () => console.log('已完成')
  13.         })
  15.         // The same as above
  16.         // $wuxToast().success('已完成', {
  17.         //     duration: 1500,
  18.         //     color: '#fff',
  19.         //     success: () => console.log('已完成')
  20.         // })
  21.     },
  22.     showToastCancel() {
  23.         $wuxToast().show({
  24.             type: 'cancel',
  25.             duration: 1500,
  26.             color: '#fff',
  27.             text: '取消操作',
  28.             success: () => console.log('取消操作')
  29.         })
  31.         // The same as above
  32.         // $wuxToast().error('取消操作', {
  33.         //     duration: 1500,
  34.         //     color: '#fff',
  35.         //     success: () => console.log('取消操作')
  36.         // })
  37.     },
  38.     showToastErr() {
  39.         $wuxToast().show({
  40.             type: 'forbidden',
  41.             duration: 1500,
  42.             color: '#fff',
  43.             text: '禁止操作',
  44.             success: () => console.log('禁止操作')
  45.         })
  47.         // The same as above
  48.         // $wuxToast().warning('禁止操作', {
  49.         //     duration: 1500,
  50.         //     color: '#fff',
  51.         //     success: () => console.log('禁止操作')
  52.         // })
  53.     },
  54.     showToastText() {
  55.         $wuxToast().show({
  56.             type: 'text',
  57.             duration: 1500,
  58.             color: '#fff',
  59.             text: '文本提示',
  60.             success: () => console.log('文本提示')
  61.         })
  63.         // The same as above
  64.         // $wuxToast().info('文本提示', {
  65.         //     duration: 1500,
  66.         //     color: '#fff',
  67.         //     success: () => console.log('文本提示')
  68.         // })
  69.     },
  70.     showToastIcon() {
  71.         $wuxToast().show({
  72.             type: 'default',
  73.             duration: 1500,
  74.             color: '#fff',
  75.             icon: 'ios-happy',
  76.             text: '自定义图标',
  77.             success: () => console.log('自定义图标')
  78.         })
  79.     },
  80.     showToastReturn() {
  81.         if (this.timeout) clearTimeout(this.timeout)
  83.         const hide = $wuxToast().show({
  84.             type: 'success',
  85.             duration: 1500,
  86.             color: '#fff',
  87.             text: '已完成',
  88.         })
  90.         this.timeout = setTimeout(hide, 1000)
  91.     },
  92.     showToastPromie() {
  93.         const hide = $wuxToast().show({
  94.             type: 'success',
  95.             duration: 1500,
  96.             color: '#fff',
  97.             text: '已完成',
  98.         })
  100.         // hide.promise.then(() => console.log('success'))
  101.         hide.then(() => console.log('success'))
  102.     },
  103. })

视频演示

Toast

API

参数 类型 描述 默认值
options object 配置项 -
options.prefixCls string 自定义类名前缀 wux-toast
options.classNames any 过渡的类名，更多内置过渡效果请参考 AnimationGroup wux-animate—fadeIn
options.type string 提示类型，可选值为 default、success、cancel、forbidden、text default
options.duration number 提示延迟时间 1500
options.color string 图标颜色 #fff
options.text string 提示文本 -
options.icon string 图标名称 -
options.mask boolean 是否显示蒙层 true
options.success function 关闭后的回调函数 -

Toast.method

静态方法

  • Toast.show
  • Toast.success
  • Toast.warning
  • Toast.error
  • Toast.info

以上函数支持参数 Toast(text: string, options: object) 或 Toast(options: object)，调用后会返回一个引用，可以通过该引用手动关闭组件

  1. const hide = Toast.show()
  2. hide()
  4. // 返回值支持 promise 接口，可以通过 then/promise.then 方法在关闭后运行 callback
  5. hide.then(callback)
  6. hide.promise.then(callback)

销毁方法

  • Toast.hide