Toast 提示

Toast 提示

使用指南

在 page.json 中引入组件

"usingComponents": {
  "w-toast": "wuss-weapp/w-toast/index",
}

视频演示

代码演示

<w-pane title="Toast" desc="提示" />
<view bindtap="a">
    点这里测试是否会被穿透
    <w-toast id="wuss-toast" wuss-class="test"/>
    <w-button catchtap="top" type="info">top</w-button>
    <w-button catchtap="middle" type="info">middle</w-button>
    <w-button catchtap="bottom" type="info">bottom</w-button>
    <w-button catchtap="default" type="info">default</w-button>
    <w-button catchtap="success" type="warn">带icon: success</w-button>
    <w-button catchtap="like" type="warn">带icon: like</w-button>
    <w-button catchtap="useHide" type="danger">手动关闭 Toast </w-button>
</view>

import { Toast } from 'wuss-weapp/index';
Page({
  top() {
    Toast.show({
      position: 'top',
      message: 'top',
    });
  },
  middle() {
    Toast.show({
      position: 'middle',
      message: 'middle',
    });
  },
  bottom() {
    Toast.show({
      position: 'bottom',
      message: 'bottom',
    });
  },
  default() {
    Toast.show({
      message: 'wuss小程序UI库',
    });
  },
  success() {
    Toast.show({
      type: 'success',
      message: 'success',
    });
  },
  like() {
    Toast.show({
      type: 'like',
      message: '收藏成功',
    });
  },
  thenClose() {
    Toast.show({ message: '完成后打印 close ' }).then(() => {
      console.log('close');
    });
  },
  useHide() {
    const wussToast = Toast.show({ message: '2.5s 后关闭 Toast', duration: 0 });
    wussToast.then(() => {
      console.log('close');
    });
    setTimeout(wussToast.hide, 2500);
  },
});

API

Event 事件

show 方法属性

Class 自定义类名