@wines/toast v1.5.1

@wines/toast

Toast 提示框

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

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Toast",
  "usingComponents": {
    "wux-button": "@wines/button",
    "wux-toast": "@wines/toast"
  }
}

示例

<wux-toast id="wux-toast" />
<view class="page">
	<view class="page__hd">
		<view class="page__title">Toast</view>
		<view class="page__desc">提示框</view>
	</view>
	<view class="page__bd page__bd_spacing">
		<wux-button block type="light" bind:click="showToast">Success</wux-button>
		<wux-button block type="light" bind:click="showToastCancel">Cancel</wux-button>
		<wux-button block type="light" bind:click="showToastErr">Forbidden</wux-button>
		<wux-button block type="light" bind:click="showToastText">Text</wux-button>
		<wux-button block type="light" bind:click="showToastIcon">Custom Icon</wux-button>
		<wux-button block type="light" bind:click="showToastReturn">
			Use return value to close
		</wux-button>
		<wux-button block type="light" bind:click="showToastPromie">
			Use promise to know when closed
		</wux-button>
	</view>
</view>

import { $wuxToast } from '@wines/toast';
import { PageData, PageCustom } from '@wines/core';

Page<PageData, PageCustom>({
  data: {},
  onLoad() {
    /** */
  },
  showToast() {
    $wuxToast().show({
      type: 'success',
      duration: 1500,
      color: '#fff',
      text: '已完成',
      success: () => console.log('已完成'),
    });

    // The same as above
    // $wuxToast().success('已完成', {
    //     duration: 1500,
    //     color: '#fff',
    //     success: () => console.log('已完成')
    // })
  },
  showToastCancel() {
    $wuxToast().show({
      type: 'cancel',
      duration: 1500,
      color: '#fff',
      text: '取消操作',
      success: () => console.log('取消操作'),
    });

    // The same as above
    // $wuxToast().error('取消操作', {
    //     duration: 1500,
    //     color: '#fff',
    //     success: () => console.log('取消操作')
    // })
  },
  showToastErr() {
    $wuxToast().show({
      type: 'forbidden',
      duration: 1500,
      color: '#fff',
      text: '禁止操作',
      success: () => console.log('禁止操作'),
    });

    // The same as above
    // $wuxToast().warning('禁止操作', {
    //     duration: 1500,
    //     color: '#fff',
    //     success: () => console.log('禁止操作')
    // })
  },
  showToastText() {
    $wuxToast().show({
      type: 'text',
      duration: 1500,
      color: '#fff',
      text: '文本提示',
      success: () => console.log('文本提示'),
    });

    // The same as above
    // $wuxToast().info('文本提示', {
    //     duration: 1500,
    //     color: '#fff',
    //     success: () => console.log('文本提示')
    // })
  },
  showToastIcon() {
    $wuxToast().show({
      type: 'default',
      duration: 1500,
      color: '#fff',
      icon: 'ios-happy',
      text: '自定义图标',
      success: () => console.log('自定义图标'),
    });
  },
  showToastReturn() {
    if (this.timeout) clearTimeout(this.timeout);

    const hide = $wuxToast().show({
      type: 'success',
      duration: 1500,
      color: '#fff',
      text: '已完成',
    });

    this.timeout = setTimeout(() => {
      hide();
    }, 1000);
  },
  showToastPromie() {
    const hide = $wuxToast().show({
      type: 'success',
      duration: 1500,
      color: '#fff',
      text: '已完成',
    });

    // hide.promise.then(() => console.log('success'))
    void hide.then(() => console.log('success'));
  },
});

API

Toast.method

静态方法

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

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

const hide = Toast.show()
hide()

// 返回值支持 promise 接口，可以通过 then/promise.then 方法在关闭后运行 callback
hide.then(callback)
hide.promise.then(callback)

销毁方法

• Toast.hide