2023-02-13_有赞小程序UI框架之Toast

前言

• 在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。

1. 引用

"usingComponents": {
  "van-toast": "@vant/weapp/toast/index"
}

2. 使用

• 使用起来有点麻烦，下面三行不能少。注意一定要在wxml文件中添加van-toast组件，引入Toast对象后，就可以使用Toast对象的提示弹出功能了
• 可以直接调用Toast或者快捷方法，或者通过自定义option来显示不同的toast。不带图标的toast是长方形的。

import Toast from '@vant/weapp/toast/toast';
Toast('我是提示文案，建议不超过十五字~');
<van-toast id="van-toast" />

3. 成功/失败提示

image.png

Toast.sueccess("")
Toast.fail("")

4. 载入提示

Toast.loading({
  duration: 0,//持续展示Toast，
  message: '',
})

5. 清除全部Toast

Toast.clear()

6. 常用方法

image.png

7. Options的常用可选值

image.png

参考文章

1. Toast 轻提示