轻提示 Toast

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

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

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

之后在js里写下调用方法

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

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

无文字基本类型

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

如下图：

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

注意事项

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

<!-- 显示 success 的提示框 -->
  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，所以当设置了 时，icon 不显示。

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

注意事项

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

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

注意事项

• image 的权重大于 icon ，当设置image时， icon不生效

icon参数说明