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 type="primary" text="按钮" click="clickToast1Btn"></x-button>
    <x-button type="secondary" text="显示toast2" click="clickToast2Btn"></x-button>
    <x-button text="显示遮罩层" click="clickOverlayBtn"></x-button>
    <x-button type="primary" text="显示dialog" click="clickDialogBtn"></x-button>
    <x-toast></x-toast>
    <x-overlay show="{{ showOverlay }}" click="clickOverlay">
      <view style="height: 50rpx;width: 50rpx;background-color: white;"></view>
    </x-overlay>
    <x-dialog show="{{ showDialog }}" clickConfirm="clickConfirm" clickCancel="clickCancel" message="是否确认删除？" overlay="{{false}}">
      <view slot="title">标题</view>
    </x-dialog>
  </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-switch": "../assembly/switch/switch",
    "x-button": "../assembly/button/button",
    "x-slider": "../assembly/slider/slider",
    "x-toast": "../assembly/toast/toast",
    "x-overlay": "../assembly/overlay/overlay",
    "x-card": "../assembly/card/card",
    "x-dialog":"../assembly/dialog/dialog"
  },
  "state": {
    "showToast1": false,
    "showToast2": false,
    "showOverlay": false,
    "showDialog": false
  }
}

ts

import { 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);
    this.addEventListener("clickToast1Btn", (e, target): void => {
      //  未测试多个toast同时调用的问题
      let toastOptions = new ToastOptions();
      toastOptions.message = "测试Toast1";
      toastOptions.type = "fail";
      //   toastOptions.iconURL = "https://gw.alicdn.com/imgextra/i1/O1CN01evbrT81s2JRO3tkra_!!6000000005708-2-tps-200-200.png"
      Toast.show(toastOptions);
    });
    this.addEventListener("clickToast2Btn", (e, target): void => {
      let toastOptions = new ToastOptions();
      toastOptions.message = "测试Toast2";
      toastOptions.type = "info";
      toastOptions.duration = 5000;
      toastOptions.position = "middle";
      Toast.show(toastOptions);
    });
    this.addEventListener("clickOverlayBtn", (e, target): void => {
      (target as ComponentTest).setState(
        JSON.parseObject(`{"showOverlay":true}`)
      );
      console.log("====打开遮罩");
    });
    this.addEventListener("clickOverlay", (e, target): void => {
      (target as ComponentTest).setState(
        JSON.parseObject(`{"showOverlay":false}`)
      );
      console.log("====关闭遮罩");
    });
    this.addEventListener("clickDialogBtn", (e, target): void => {
      console.log("dadsada");
      (target as ComponentTest).setState(
        JSON.parseObject(`{"showDialog":true}`)
      );
    });
    this.addEventListener("clickConfirm", (e, target): void => {
      console.log("****关闭弹窗****");
      (target as ComponentTest).setState(
        JSON.parseObject(`{"showDialog":false}`)
      );
    });
    this.addEventListener("clickCancel", (e, target): void => {
      console.log("****关闭弹窗****");
      (target as ComponentTest).setState(
        JSON.parseObject(`{"showDialog":false}`)
      );
    });
  }
}

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 | |