文档

轻提示(Toast)

更新时间:

对操作结果的轻量级反馈,无需用户操作即可消失。最长文案不超过 2 行,最多可以显示 24 个字符,文案过长会被截断。

属性

属性

类型

必填

默认值

说明

type

string

-

Toast 类型,展示相应图标。支持 success / fail / warning / loading

content

string

-

Toast 文本内容

icon

Icon 类型

-

Toast 图标

image

string

-

Toast 图标

duration

number

2000 ms

Toast 持续时间,duration 为 0 时不会自动关闭。

visible

boolean

false

是否隐藏

showMask

boolean

false

是否展示蒙层

maskCloseable

boolean

false

点击蒙层是否关闭

className

string

-

类名

事件

事件名

说明

类型

onClose

Toast 关闭后的回调

(e) => void

样式类

类名

说明

amd-toast-wrapper

整理样式

amd-toastWithIcon-wrapper

带有 Icon 时整体样式

amd-toast-icon

Icon 样式

代码示例

基本使用

index.axml 代码示例如下:

<button onTap="handleShowToast" data-index="1" class="button" inline="{{true}}" inlineSize="{{medium}}">
  纯文字 toast
</button>

<button onTap="handleShowToast" data-index="4" class="button" inline="{{true}}" inlineSize="{{medium}}">
  纯文字 toast,文案过长
</button>

<button onTap="handleShowToast" data-index="2" class="button" inline="{{true}}" inlineSize="{{medium}}">
  自定义Icon
</button>

<button onTap="handleShowToast" data-index="5" class="button" inline="{{true}}" inlineSize="{{medium}}">
  自定义图片
</button>

<button onTap="handleShowToast" data-index="3" class="button" inline="{{true}}" inlineSize="{{medium}}">
  提示持续3s
</button>

<button onTap="handleShowToast" data-index="6" class="button" inline="{{true}}" inlineSize="{{medium}}">
  type = loading
</button>

<toast
  content="{{content1}}"
  visible="{{toast1Show}}"
  duration="{{0}}"
  showMask="{{true}}"
  maskCloseable="{{true}}"
  onClose="handleCloseToast"
  data-index="1"
  class="toastWrapper"
/>

<toast 
  content="{{content4}}"
  visible="{{toast4Show}}"
  data-index="4"
  duration="{{0}}"
  showMask="{{true}}"
  maskCloseable="{{true}}"
  onClose="handleCloseToast"
  class="toastWrapper"
/>

<toast
  content="{{content5}}"
  icon="{{icon2}}"
  visible="{{toast2Show}}"
  duration="{{0}}"
  showMask="{{true}}"
  maskCloseable="{{true}}"
  onClose="handleCloseToast"
  data-index="2"
  class="toastWrapper"
/>

<toast
  content="{{content2}}"
  image="{{image1}}"
  visible="{{toast5Show}}"
  duration="{{0}}"
  showMask="{{true}}"
  maskCloseable="{{true}}"
  onClose="handleCloseToast"
  data-index="5"
  class="toastWrapper"/>

<toast
  content="{{content3}}"
  visible="{{toast3Show}}"
  duration="{{3000}}"
  class="toastWrapper"
  data-index="3"
  onClose="handleCloseToast"
  showMask="{{true}}"
  maskCloseable="{{true}}"
/>

<toast
  content="{{content2}}"
  visible="{{toast6Show}}"
  class="toastWrapper"
  data-index="6"
  type="loading"
  onClose="handleCloseToast"
  showMask="{{true}}"
  duration="{{0}}"
  maskCloseable="{{true}}"
/>

index.js 代码示例如下:

Page({
  data: {
    toastShow: false,
    content1: "最长文案超过2行,最多可以显示24个字符。",
    content2: "加载中",
    content3: "这个提示持续时间3s",
    content4: "这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文案",
    content5: "欢迎使用新版本",
    toast1Show: false,
    toast2Show: false,
    toast3Show: false,
    toast4Show: false,
    toast5Show: false,
    toast6Show: false,
    icon2: "LikeOutline",
    image1: 'https://gw.alipayobjects.com/mdn/rms_5118be/afts/img/A*4NPGQ66arP0AAAAAAAAAAAAAARQnAQ'
  },

  handleShowToast(e) {
    const { index }  = e.target.dataset;
    this.setData({
      toast1Show: false,
      toast2Show: false,
      toast3Show: false,
      toast4Show: false,
      toast5Show: false,
      toast6Show: false,
    })

    this.setData({
      [`toast${index}Show`]: true
    })

    console.log(this.data)
  },

  handleCloseToast(e) {
    const { index }  = e.target.dataset;
    this.setData({
      [`toast${index}Show`]: false
    })
  }
});

index.acss 代码示例如下:

.toastWrapper {

}

.image {
  width: 80rpx;
  height: 80rpx;
}

.button {
  margin-left: 12px;
}

index.json 代码示例如下:

{
  "defaultTitle": "Toast",
  "usingComponents": {
    "toast": "antd-mini/es/Toast/index",
    "button": "antd-mini/es/Button/index"
  }
}

  • 本页导读 (0)
文档反馈