# 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	导入 Toast 后使用	参下

# show 方法属性

属性	说明	类型	默认值
type	icon 类型	string	-
message	提示内容	string	-
duration	自动关闭的延时，单位毫秒	number	1500
position	弹出位置,可选值: default top middle bottom	string	default
mask	是否可以穿透	boolean	false
color	icon 颜色	string	#ffffff
size	icon 大小	number	100

# Class 自定义类名

类名	说明
wuss-class	根节点样式类

Edit this page

← ActionSheet 操作菜单 Alert 弹出框 →