指南组件

Toast 轻提示

用于显示简短消息的轻量级提示组件

sKy
@skiyee
Source
该组件目前处于实验性阶段，API 及功能可能会有较大调整，欢迎试用并提供反馈
<script setup lang="ts">
import { ref } from 'vue'

const toastVisible = ref(false)
</script>

<template>
  <div class="p-4">
    <SkButton label="显示提示" @click="() => toastVisible = true" />
    <SkToast v-model:visible="toastVisible" message="这是一个基础提示消息" />
  </div>
</template>

用法

Controlled 显示状态

Prop类型默认值描述
v-model:visiblebooleanfalse设置提示的显示状态 (双向绑定)
<script setup lang="ts">
import { ref } from 'vue'

const toastVisible = ref(false)
</script>

<template>
  <div class="p-4">
    <SkButton label="展示Toast" @click="() => toastVisible = true" />
    <SkToast v-model:visible="toastVisible" message="Hello World" />
  </div>
</template>

Message 消息内容

Prop类型默认值描述
messagestring-设置提示的消息内容
<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
const currentMessage = ref('')

function handleShowToast(message: string) {
  currentMessage.value = message
  visible.value = true
}
</script>

<template>
  <div class="flex flex-col p-4 gap-3">
    <SkButton label="短消息" color="brand" @click="handleShowToast('操作成功')" />
    <SkButton label="长消息" color="brand" @click="handleShowToast('这是一个比较长的提示消息，用于演示消息内容的显示效果')" />
    <SkButton label="多行消息" color="brand" @click="handleShowToast('第一行消息\n第二行消息\n第三行消息')" />
  </div>
  <SkToast v-model:visible="visible" :message="currentMessage" />
</template>

Type 类型

Prop默认值类型描述
typedefault{Type}设置提示的类型
Type描述
default默认类型
info信息类型
success成功类型
warning警告类型
error错误类型
<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
const currentType = ref<'default' | 'success' | 'warning' | 'error'>('default')
const currentMessage = ref('')

function handleShowToast(type: typeof currentType.value, message: string) {
  currentType.value = type
  currentMessage.value = message
  visible.value = true
}
</script>

<template>
  <div class="flex flex-col p-4 gap-3">
    <SkButton label="默认提示" color="neutral" @click="handleShowToast('default', '这是一个默认提示')" />
    <SkButton label="成功提示" color="success" @click="handleShowToast('success', '操作成功')" />
    <SkButton label="警告提示" color="warning" @click="handleShowToast('warning', '请注意这个警告')" />
    <SkButton label="错误提示" color="danger" @click="handleShowToast('error', '发生了错误')" />
  </div>
  <SkToast v-model:visible="visible" :type="currentType" :message="currentMessage" />
</template>

Placement 位置

Prop默认值类型描述
placementcenter{Placement}设置提示的位置
Placement描述
top顶部
center中间
bottom底部
<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
const currentPosition = ref<'top' | 'center' | 'bottom'>('center')
const currentMessage = ref('')

function handleShowToast(placement: typeof currentPosition.value, message: string) {
  currentPosition.value = placement
  currentMessage.value = message
  visible.value = true
}
</script>

<template>
  <div class="flex flex-col p-4 gap-3">
    <SkButton label="顶部提示" color="brand" @click="handleShowToast('top', '顶部显示的提示')" />
    <SkButton label="中间提示" color="brand" @click="handleShowToast('center', '中间显示的提示')" />
    <SkButton label="底部提示" color="brand" @click="handleShowToast('bottom', '底部显示的提示')" />
  </div>
  <SkToast v-model:visible="visible" :placement="currentPosition" :message="currentMessage" />
</template>

Duration 持续时间

Prop默认值类型描述
duration3000number设置提示显示的持续时间(ms)，0 表示不自动关闭
<script setup lang="ts">
import { ref } from 'vue'

// 响应式状态管理
const visible = ref(false)
const currentDuration = ref(3000)
const currentMessage = ref('')
const currentClosable = ref(false)

function handleShowToast(duration: number, message: string, closable = false) {
  currentDuration.value = duration
  currentMessage.value = message
  currentClosable.value = closable
  visible.value = true
}
</script>

<template>
  <div class="flex flex-col p-4 gap-3">
    <SkButton label="短时间 (1秒)" color="brand" @click="handleShowToast(1000, '短时间显示 (1秒)')" />
    <SkButton label="正常时间 (3秒)" color="brand" @click="handleShowToast(3000, '正常时间显示 (3秒)')" />
    <SkButton label="长时间 (5秒)" color="brand" @click="handleShowToast(5000, '长时间显示 (5秒)')" />
    <SkButton label="持续显示" color="brand" @click="handleShowToast(0, '持续显示，需要手动关闭', true)" />
  </div>
  <SkToast v-model:visible="visible" :duration="currentDuration" :message="currentMessage" :closable="currentClosable" />
</template>

Icon 图标

Prop默认值类型描述
icon-string设置提示的自定义图标
showIcontrueboolean是否显示图标
<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)

const type = ref<'default' | 'success' | 'warning' | 'error' | 'info'>('default')

function handleShowToast(newType: typeof type.value) {
  type.value = newType

  visible.value = true
}
</script>

<template>
  <div class="p-4 flex flex-col gap-3">
    <SkButton label="默认 Toast" color="neutral" @click="handleShowToast('default')" />
    <SkButton label="成功 Toast" color="success" @click="handleShowToast('success')" />
    <SkButton label="警告 Toast" color="warning" @click="handleShowToast('warning')" />
    <SkButton label="错误 Toast" color="danger" @click="handleShowToast('error')" />
    <SkButton label="信息 Toast" color="brand" @click="handleShowToast('info')" />
  </div>
  <SkToast v-model:visible="visible" :type="type" message="显示含图标的消息提示" />
</template>

Closable 可关闭

Prop默认值类型描述
closablefalseboolean是否显示关闭按钮
<script setup lang="ts">
import { ref } from 'vue'

const toastVisible = ref(false)
</script>

<template>
  <div class="p-4">
    <SkButton label="显示可关闭提示" @click="() => toastVisible = true" />
    <SkToast v-model:visible="toastVisible" message="这是一个可关闭的提示消息" :closable="true" :duration="0" />
  </div>
</template>

Backdrop 背景层

Prop默认值类型描述
backdropfalseboolean是否显示背景层
<script setup lang="ts">
import { ref } from 'vue'

const toastVisible = ref(false)
</script>

<template>
  <div class="p-4">
    <SkButton label="显示带背景层的提示" @click="() => toastVisible = true" />
    <SkToast
      v-model:visible="toastVisible"
      message="这是一个带背景层的提示消息"
      :backdrop="true"
      :duration="3000"
    />
  </div>
</template>

ZIndex 层级

Prop类型默认值描述
zIndexnumber2000设置提示的显示层级
<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
const currentZIndex = ref(2000)
const currentMessage = ref('')

function handleShowToast(zIndex: number, message: string) {
  currentZIndex.value = zIndex
  currentMessage.value = message
  visible.value = true
}
</script>

<template>
  <div class="flex flex-col p-4 gap-3">
    <div class="relative bg-orange-500 p-4 text-white z-1500 rounded-lg">
      这是 zIndex = 1500 的盒子
    </div>
    <SkButton label="低层级 (1000)" @click="handleShowToast(1000, '层级 1000 的提示')" />
    <SkButton label="默认层级 (2000)" @click="handleShowToast(2000, '层级 2000 的提示')" />
    <SkButton label="高层级 (3000)" @click="handleShowToast(3000, '层级 3000 的提示')" />
  </div>
  <SkToast v-model:visible="visible" :z-index="currentZIndex" :message="currentMessage" />
</template>

例子

自定义内容

通过插槽可以自定义 Toast 的内容和图标。

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <SkButton label="自定义图标" @click="() => visible = true" />
  <SkToast v-model:visible="visible" type="success">
    <template #icon>
      <SkIcon name="i-lucide:check-check" class="text-red-500" />
    </template>
    <div>
      <span class="block text-sm font-medium">操作成功</span>
      <span class="text-xs opacity-80">您的数据已保存</span>
    </div>
  </SkToast>
</template>

接口

Props

属性名类型默认值描述
v-model:visiblebooleanfalse详见 Controlled 显示状态
messagestring-详见 Message 消息内容
type{Type}default详见 Type 类型
placement{Placement}center详见 Placement 位置
durationnumber3000详见 Duration 持续时间
iconstring-详见 Icon 图标
showIconbooleantrue详见 Icon 图标
closablebooleanfalse详见 Closable 可关闭
backdropbooleanfalse详见 Backdrop 背景层
zIndexnumber2000详见 ZIndex 层级

Slots

插槽名描述
default提示的内容
icon自定义图标

Emits

事件名参数描述
close()当提示关闭时触发

交互

正在完善中，敬请期待！😊

点颗星星 打赏项目