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	-