Toast 轻提示

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

代码演示

基础用法

<!-- 在页面内添加对应的节点 -->
<hd-toast id="hd-toast"></hd-toast>

<button type="primary" @click="open">开启toast</button>
<button type="primary" @click="close">关闭toast</button>

引入

// uni_modules
import { showToast, hideToast } from '@/uni_modules/fant-mini'
// npm
import { showToast, hideToast } from 'fant-mini'

export default {
  methods: {
    open() {
      showToast({})
    },
    close() {
      hideToast()
    }
  }
}

底色类型

通过type设置底色类型；white底色为白色，图标为多色；black底色为黑色，图标为白色；默认为black。

<button type="primary" @click="open">开启toast</button>
<hd-toast id="hd-toast"></hd-toast>

export default {
  methods: {
    open() {
      showToast({ type: 'white' })
    }
  }
}

提示内容

通过title设置提示内容。

<button type="primary" @click="open">开启toast</button>
<hd-toast id="hd-toast"></hd-toast>

export default {
  methods: {
    open() {
      showToast({ title: '这里是提示内容' })
    }
  }
}

提示图标

通过icon设置提示图标；success: 显示成功图标；warning: 显示警告图标；error: 显示错误图标；none: 不显示图标。

<button type="primary" @click="open">开启toast</button>
<hd-toast id="hd-toast"></hd-toast>

export default {
  methods: {
    open() {
      showToast({ title: '这里是提示内容', icon: 'error' })
    }
  }
}

自定义图标

通过image设置自定义图标，优先级大于icon。

<button type="primary" @click="open">开启toast</button>
<hd-toast id="hd-toast"></hd-toast>

export default {
  methods: {
    open() {
      showToast({ title: '这里是提示内容', icon: 'error', image: '' })
    }
  }
}

提示持续时间

通过duration设置调整显示toast时间，单位毫秒，默认 1500 毫秒。

<button type="primary" @click="open">开启toast</button>
<hd-toast id="hd-toast"></hd-toast>

export default {
  methods: {
    open() {
      showToast({ title: '这里是提示内容', icon: 'error', duration: 2000 })
    }
  }
}

方法

fant-mini 中导出了以下 Toast 相关的辅助函数：

方法名	说明	参数	返回值
showToast	展示提示	ToastOptions	Toast实例
hideToast	关闭提示	-	-

ToastOptions 数据结构

调用 showToast 方法时，支持传入以下选项：

参数	说明	类型	是否必填	默认值
type	底色类型，可选值:white black	ToastType	false	black
title	提示的内容。	String	false	-
icon	图标类型，可选值:none success warning error	ToastIconType	false	none
image	自定义图标的本地路径	String	false	-
duration	提示的持续时间	Number	false	1500

Props

Name	Description	Type	Required	Default
value	toast是否展示	Boolean	false	false
duration	toast展示时长(ms)，值为 0 时，notify 不会消失，默认值1500	Number	false	1500
title	toast提示的内容	String	false	-
type	toast底色类型	'white' / 'black'	false	默认值是：black
icon	toast图标 - success: 显示成功图标 - warning: 显示警告图标 - error: 显示错误图标 - none: 不显示图标	'success' / 'none'/ 'warning'/ 'error'	false	默认值是：none
image	toast自定义图片	String	false	-
zIndex	自定义层级，默认值 1000	Number	false	1000

Events

Event Name	Description	Parameters
input	消息展示状态变更时触发	value:Boolean 消息展示状态，建议通过v-model双向绑定输入值，而不是监听此事件的形式