Toast 轻提示

全局展示操作反馈的轻量级提示组件。

基本用法

通过 v-model 控制显示/隐藏。

<template>
  <ABtn @click="show = true">显示提示</ABtn>
  <AToast v-model="show">这是一条提示消息</AToast>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const show = ref(false)
</script>

可关闭

通过 closable 属性控制是否显示关闭按钮。

<template>
  <ABtn @click="show = true">可关闭</ABtn>
  <AToast v-model="show" closable>点击右侧 × 关闭</AToast>
</template>

自动关闭

通过 duration 属性设置自动关闭时间（毫秒），设为 0 则不自动关闭。

<template>
  <ABtn @click="show = true">2 秒关闭</ABtn>
  <AToast v-model="show" :duration="2000">2 秒后自动消失</AToast>
</template>

搭配使用

多个属性组合使用。

<template>
  <ABtn @click="show = true">显示提示</ABtn>
  <AToast v-model="show" :duration="5000" closable>
    这条消息 5 秒后自动关闭，也可手动关闭
  </AToast>
</template>

API

Props

名称	类型	默认值	说明
modelValue	boolean	false	是否显示
duration	number	3000	自动关闭延迟（毫秒），0 表示不自动关闭
closable	boolean	true	是否显示关闭按钮

Events

名称	参数	说明
update:modelValue	value: boolean	显示状态变化
close	—	关闭时触发