Toast 轻提示

通过组件实例显示短暂提示，可附带图标或自定义内容。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

vue

<template>
  <!-- 提示组件 -->
  <fui-toast ref="toastRef" />
  <button @click="showToast">显示提示</button>
</template>

<script>
export default {
  methods: {
    /** 展示操作结果 */
    showToast() {
      this.$refs.toastRef.show({ text: '操作成功', duration: 2000 });
    }
  }
};
</script>

属性

属性	类型	说明	官网默认值
padding	Array	提示框内边距	['32rpx', '32rpx']
background	String	背景色	rgba(0,0,0,.6)
width	Number / String	图标宽高，单位 rpx	64
size	Number / String	文字大小，单位 rpx	30
color	String	文字颜色	#fffF
zIndex	Number	层级，nvue 不支持	1001

方法和插槽

show({ text, src, duration }) 显示提示，src 是图标地址，duration 是显示毫秒数，默认 2000。默认插槽可放置自定义内容。组件未声明自定义事件。

本地源码的 color 默认值为 #fff；nvue 中元素顺序影响显示层级。

事件

事件	说明	回调参数
—	无自定义事件	—

插槽

插槽	说明
default	提示框中的自定义内容

Toast 轻提示 ​

支持平台 ​

基础用法 ​

属性 ​

方法和插槽 ​

事件 ​

插槽 ​

Toast 轻提示

支持平台

基础用法

属性

方法和插槽

事件

插槽