如何設定小程式輕提示Toast - Mobile Platform as a Service

對操作結果的輕量級反饋，無需使用者操作即可消失。最長文案不超過 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"
  }
}