轻提示 Toast

toast组件常用于在页面中展示重要的提示信息。

我们提供了Toast组件的两种调用方法，一种是最基本的组件调用方式，通过show属性来控制显示与隐藏，另一种是更接近于微信原生的调用方法，通过wx.lin.showToast() 这个方法来进行调用。

通过Api调用

在项目中，showToast这个操作可能会在一些函数的回调中被使用，那么通过Api去调用，是一种更好的体验。下面会通过一些代码示例来帮助理解。

首先需要在json文件中引入Toast组件，其次在wxml文件中使用它。

<l-toast />
<view bindtap="show">触发</view>

之后在js里写下调用方法

show() {
  wx.lin.showToast({
    title: '创建成功~',
    icon: 'success',
    iconStyle: 'color:#7ec699; size: 60',
    success: (res) => {
      console.log(res)
    },
    complete: (res) => {
      console.log(res)
    }
  })
}

接着就能查看到页面出现了 创建成功~ 的Toast提示了

无文字基本类型

提示框可通过设置show属性为true、false 来控制显示和隐藏，并且在不设置image 和 icon 的情况下，只会显示文本内容，最多支持显示两行，最多20个汉字长度，超出部分会被隐藏。

示例代码

<!-- 单行文本 -->
<l-toast
  show="{{true}}"
  title="这是一条基础提示框"
/>
<!-- 多行文本 -->
<l-toast
  show="{{true}}"
  title="这是一条基础提示框，这是一条基础提示框"
/>

如下图：

icon + 文本内容的提示框

当我们遇到有一些场景需要icon+文字的提示框时，可以通过设置icon 来实现，同时，还可以设置 icon-style 来控制icon图标的大小。语法同设置行内样式一致，支持属性为：size和color。如：icon-style="size:60; color:#34f464"

注意事项

• 设置icon 为 success、loading、error 时，显示效果如下图所示。
• 当设置 icon 为其他值时，默认显示白色，
• icon 的大小和颜色可以通过 icon-style 来设置

示例代码

<!-- 显示 success 的提示框 -->
<l-toast
  show="{{true}}"
  icon="success"
  icon-style="size:60; color:#34f464"
  title="成功提示框"
/>

自定义图片的提示框

当icon 属性不能满足我们的需求时，我们还可以通过设置image 来自由的定义显示的图片内容，只需要在image属性里传入有效的图片路径即可。同时还可以通过image-style来设置宽和高，单位为rpx。如：image-style="6080" 表示宽为60rpx，高为80rpx的图片；image-style="6060"则表示宽和高都是60rpx。也可以写成image-style="60"，含义相同。

注意事项

• image 的权重高于 icon，所以当设置了 image 时，icon 不显示。

示例代码

<l-toast
  show="{{true}}"
  image="path/to/img.png"
  image-style="60"
  title="图片提示框"
/>

更改文字的位置

toast 默认是列式布局（图标在上，文字在下），但是有时候会需要提示的图标居左，文字居右；或者文字居左，图标居右显示。这时，我们可以通过设置 placement 属性来完成，placement可选值为top / left / right / bottom ，默认值是 bottom。

注意事项

• 当 icon 或者 image 为空时，设置 placement 不生效。

示例代码

<l-toast
  show="{{true}}"
  icon="time"
  title="自定义提示框"
  placement="right"
/>

提示框属性（Toast Attributes）

参数	说明	类型	可选值	默认值
show	控制提示框的显示	Boolean	true/false	false
title	提示框的文本内容	String
icon	icon图标的名字	String	参考icon组件支持的范围
icon-style	icon图标的颜色和大小	String	参考icon组件支持的范围	"size:60; color:#fff"
image	图片的有效路径，支持本地路径和网络路径	String
image-style	设置图片的宽和高，单位为rpx	String		60*60
placement	文字的显示方位	String	top/left/right/bottom	bottom
duration	提示框显示的时长	Number		1500
zIndex	控制提示框的z-index层级	Number		999
center(弃用)	设置提示框是否为垂直居中（center原本是用来控制toast弹出的位置，但是toast的目的就是为了让用户直接感受到操作的反馈，所以默认垂直居中，这个api目前已经不在生效）	Boolean	true/false	true
mask	是否显示透明蒙层，防止触摸穿透	Boolean	true/false	false
open-api	是否允许使用 wx.lin.showToast	Boolean	-	true
offsetX	设置提示框向右的偏移量	Number	-	0
offsetY	设置提示框向下的偏移量	Number	-	0

注意事项

• image 的权重大于 icon ，当设置image时， icon不生效
• center 设置为false的时候，提示框偏底部显示，默认居中显示。

icon参数说明

属性值	说明	类型
success	显示绿色的success 图标	String
error	显示红色的 error 图标	String
loading	显示白色的的 loading 图标	String
other	参考icon组件支持的范围	String