toast 轻提示

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-toast": "@retailwe/ui-toast/index"
}

代码演示

基础用法

通用 toast 一些信息文字提示

<button bindtap="handleTap">出来吧，toast!!</button> <wr-toast id="wr-toast" />

Page({
  data: {},
  handleTap(e) {
    const { index } = e.currentTarget.dataset;
    const toast = this.selectComponent(`#wr-toast`);
    toast.show({
      icon: 'success',
      text: 'toast内容'
      zIndex: 100,
      duration: 2000,
    });
  },
});

使用 core/toast.ts

通用 toast 一些信息文字提示

<button bindtap="handleTap">出来吧，toast!!</button> <wr-toast id="wr-toast" />

import Toast from '你的路径/core/base/helpers/toast';
Page({
  data: {},
  handleTap(e) {
    Toast({
      context: this,
      selector: '#wr-toast',
      text: 'toast内容',
    });
  },
});

API

wr-toast Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | | --------- | ---------------------- | -------- | --------- | ---- | | icon | 弹窗显示 icon 类型名称 | string | success | - | | iconColor | 弹窗显示 icon 颜色 | string | #fff | - | | iconSize | 弹窗显示 icon 大小 | string | - | - | | text | 弹窗显示文字提示 | string | - | - | | textColor | 弹窗显示文字颜色 | string | `` | - | | zIndex | 当前弹窗所在的层级值 | number | 10 | - | | fontSize | 弹窗显示文字大小 | number | - | - | | duration | 弹窗显示毫秒数 | number | 2000 | - |