Toast 轻提示

网址: https://vant-contrib.gitee.io/vant/#/zh-CN/toast

一个函数式的 API. 在页面中显示一个半透明的黑色消息框.

需要导入使用, 语法:

import { showToast } from 'vant'
showToast('消息内容')

该组件提供了很多函数封装, 适用不同样式:

• 加载提示: showLoadingToast, 可用属性 message 显示消息, forbidClick 禁用背景点击.
• 成功失败提示: showSuccessToast('成功文案'), showFailToast('失败文案').
• 自定义图标: showToast(), 使用 icon 属性, 来指定图标.
• 自定义位置: showToast(), 使用 position 来设置位置, 可选 top, bottom.
• 文字换行方式: showToast(), 使用 wordBreak 属性, 可取 break-all(截断单词换行), break-word.
• 动态更新提示. showToast() 返回实例引用, 使用 message 响应式属性即可. 逻辑上将 duration 设置为 0, 不会自动关闭, 在利用计时器最后调用 closeToast() 关闭提示框. 默认轻提示是单例的.
• 多实例用法.
  1. 调用 allowMultipleToast() 方法.
  2. 每次调用 showToast() 返回一个实例.
  3. 调用实例的 close() 方法关闭.
• 修改默认配置
  1. 调用 setToastOptions({ ... }) 来进行配置.
  2. 调用 resetToastDefaultOptions() 来重置.
  3. 可以单独设置某个类型的 配置.
• 组件用法 (逻辑上对标 antd 的 Modal), 需要定制提示内容时使用.
  1. 单独注册组件 (例如全局注册)
  2. 使用 <van-toast></van-toast>
  3. 使用 v-model:show 控制显示
  4. 使用 message 插槽来定义内容

注意, 需要手动加载样式:

import 'vant/lib/toast/index.css'

可以考虑在 main.ts 文件中统一导入

// Toast
import 'vant/es/toast/style';

// Dialog
import 'vant/es/dialog/style';

// Notify
import 'vant/es/notify/style';

// ImagePreview
import 'vant/es/image-preview/style';