ui-showToast 顶部提示组件

版本：v2.3.11

顶部弹出式提示组件，支持多种主题颜色、自定义图标、标题正文分离、自动关闭和手动关闭等功能。

基本使用

<template>
  <view>
    <ui-button @click="show = true">显示提示</ui-button>
    
    <ui-showToast 
      :show="show" 
      content="这是一个基础提示" 
      @close="show = false" 
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
</script>

Props

参数	类型	默认值	说明
show	Boolean	false	是否显示提示框
title	String	''	标题文字
content	String	''	正文内容
type	String	'info'	主题类型：'primary'、'success'、'warning'、'danger'、'info'
icon	String	''	图标 class 名称（如 icon-zhengque）
duration	Number	5000	自动关闭时间（毫秒）
closable	Boolean	false	是否显示关闭按钮
center	Boolean	true	文字是否居中
fontSize	String/Number	28	字体大小

Events

事件名	说明	回调参数
close	提示框关闭时触发	-

使用示例

不同主题

组件支持 5 种主题，每种主题都有独特的渐变背景色和文字配色方案。

Primary（主要）

<ui-showToast 
  :show="show" 
  type="primary" 
  title="主要提示" 
  content="这是一个主要的操作提示" 
  @close="show = false" 
/>

Success（成功）

<ui-showToast 
  :show="show" 
  type="success" 
  title="操作成功" 
  content="您的操作已成功完成" 
  @close="show = false" 
/>

Warning（警告）

<ui-showToast 
  :show="show" 
  type="warning" 
  title="注意" 
  content="请注意检查您的操作" 
  @close="show = false" 
/>

Danger（危险）

<ui-showToast 
  :show="show" 
  type="danger" 
  title="操作失败" 
  content="很抱歉，操作未能完成" 
  @close="show = false" 
/>

Info（信息）

<ui-showToast 
  :show="show" 
  type="info" 
  title="信息" 
  content="这是一条信息提示" 
  @close="show = false" 
/>

带图标

<ui-showToast 
  :show="show" 
  type="success" 
  icon="icon-zhengque" 
  title="成功" 
  content="保存成功" 
  @close="show = false" 
/>

带标题和正文

<ui-showToast 
  :show="show" 
  title="系统通知" 
  content="您有一条新的系统消息，请及时查看处理" 
  @close="show = false" 
/>

可手动关闭

设置 closable 属性后，右上角会显示关闭按钮，用户可以提前关闭提示。

<ui-showToast 
  :show="show" 
  type="primary" 
  icon="icon-xinxi" 
  title="可手动关闭" 
  content="点击右上角 × 可提前关闭此提示" 
  :closable="true" 
  :duration="8000" 
  @close="show = false" 
/>

自定义显示时长

<ui-showToast 
  :show="show" 
  title="自定义时长" 
  content="此提示将显示 10 秒" 
  :duration="10000" 
  @close="show = false" 
/>

响应式数据驱动（完整示例）

<template>
  <view>
    <ui-button type="success" @click="showSuccessToast">成功提示</ui-button>
    <ui-button type="danger" @click="showErrorToast">错误提示</ui-button>
    <ui-button type="warning" @click="showWarningToast">警告提示</ui-button>
    
    <ui-showToast 
      :show="toast.show" 
      :title="toast.title" 
      :content="toast.content" 
      :type="toast.type" 
      :icon="toast.icon" 
      :duration="toast.duration" 
      :closable="toast.closable" 
      @close="toast.show = false" 
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const toast = ref({
  show: false,
  title: '',
  content: '',
  type: 'info',
  icon: '',
  duration: 3000,
  closable: false
})

const showSuccessToast = () => {
  toast.value = {
    show: true,
    title: '成功',
    content: '保存成功',
    type: 'success',
    icon: 'icon-zhengque',
    duration: 3000,
    closable: false
  }
}

const showErrorToast = () => {
  toast.value = {
    show: true,
    title: '错误',
    content: '加载失败，请重试',
    type: 'danger',
    icon: 'icon-cuowu',
    duration: 3000,
    closable: false
  }
}

const showWarningToast = () => {
  toast.value = {
    show: true,
    title: '警告',
    content: '网络状态不佳',
    type: 'warning',
    icon: 'icon-jurassic_warn',
    duration: 3000,
    closable: false
  }
}
</script>

主题颜色方案

主题	背景色	图标颜色	标题颜色	正文颜色	适用场景
primary	蓝色渐变	白色	白色	白色半透明	主要操作提示
success	绿色渐变	白色	白色	白色半透明	成功操作反馈
warning	橙色渐变	白色	白色	白色半透明	警告提醒
danger	红色渐变	白色	白色	白色半透明	错误提示
info	白色背景 + 浅灰边框	#909399	#303133	#606266	普通信息通知

常见场景推荐

场景	type	icon	示例代码
操作成功	success	icon-zhengque	<ui-showToast :show="show" type="success" icon="icon-zhengque" title="成功" content="操作已完成" />
操作失败	danger	icon-cuowu	<ui-showToast :show="show" type="danger" icon="icon-cuowu" title="错误" content="操作失败" />
警告提醒	warning	icon-jurassic_warn	<ui-showToast :show="show" type="warning" icon="icon-jurassic_warn" title="注意" content="请注意检查" />
系统通知	info	icon-tongzhi	<ui-showToast :show="show" type="info" icon="icon-tongzhi" title="通知" content="您有新消息" />
主要操作	primary	icon-xinxi	<ui-showToast :show="show" type="primary" icon="icon-xinxi" title="提示" content="数据已更新" />

平台兼容性

平台	支持情况
H5	✅ 支持
微信小程序	✅ 支持
支付宝小程序	✅ 支持
百度小程序	✅ 支持
字节跳动小程序	✅ 支持
QQ小程序	✅ 支持
APP	✅ 支持

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/showToast/showToast