Toast轻提示

引入

{
  "usingComponents": {
    "x-toast": "waft-ui/assembly/toast/toast"
  }
}

代码示例

<x-toast></x-toast>

import { Toast, ToastOptions } from "waft-ui";

let toastOptions = new ToastOptions();
toastOptions.message = "提示文字";
toastOptions.type = "info";
toastOptions.duration = 5000
toastOptions.position = "middle"
Toast.show(toastOptions);

效果展示

组件样式

axml

<view class="wrapper" style="background-color:lightblue;">
  <view class="test"></view>
  <x-nav-bar showArrow="{{true}}" title="测试Toast"></x-nav-bar>
  <view class="content">
    <x-button text="show" onTap="show"></x-button>
    <x-button text="warning" onTap="warning"></x-button>
    <x-button text="success" onTap="success"></x-button>
    <x-button text="fail" onTap="fail"></x-button>
    <x-toast></x-toast>
  </view>
</view>

css

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #eeeeee;
}
.content{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 30rpx;
}

json

{
  "usingComponents": {
    "x-nav-bar": "../assembly/nav-bar/nav-bar",
    "x-button": "../assembly/button/button",
    "x-toast": "../assembly/toast/toast"
  },
  "state": {
    "showToast1": false,
    "showToast2": false,
    "showOverlay": false,
    "showDialog": false
  }
}

ts

import { Event, Page, Props } from "waft";
import { JSON, JSONObject } from "waft-json";
import { Toast, ToastOptions } from "../../../assembly/toast/toast";

export class ComponentTest extends Page {
  constructor(props: Props) {
    super(props);
  }

  show(e: Event): void{
    let toastOptions = new ToastOptions();
    toastOptions.message = "测试Toast-show";
    toastOptions.type = "info";
    Toast.show(toastOptions);
  }

  warning(e: Event): void{
    Toast.warning("测试Toast-warning");
  }

  success(e: Event): void{
    Toast.success("测试Toast-success");
  }

  fail(e: Event): void{
    Toast.fail("测试Toast-fail");
  }
}

API

• methods | 方法名 | 参数 | 返回值 | 说明 | | —- | —- | —- | —- | | Toast.show | options | | | | Toast.warning | message | | | | Toast.success | message | | | | Toast.fail | message | | |

• Options | 参数 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | type | 提示类型 | string | | | position | 提示位置 | string | | | message | 提示内容 | string | | | duration | 展示时长（ms） | number | 2000 | | icon | 图标url地址 | string | |