feat: 优化提示组件,支持位置和图标显示选项

This commit is contained in:
alger
2025-06-06 23:37:24 +08:00
parent e46df8a04e
commit 155bdf246c
2 changed files with 53 additions and 6 deletions

View File

@@ -1,8 +1,8 @@
<template>
<transition name="shortcut-toast">
<div v-if="visible" class="shortcut-toast">
<div v-if="visible" class="shortcut-toast" :class="`shortcut-toast-${position}`">
<div class="shortcut-toast-content">
<div class="shortcut-toast-icon">
<div v-if="showIcon" class="shortcut-toast-icon">
<i :class="icon"></i>
</div>
<div class="shortcut-toast-text">{{ text }}</div>
@@ -14,12 +14,24 @@
<script lang="ts" setup>
import { onBeforeUnmount, ref } from 'vue';
defineProps({
position: {
type: String,
default: 'center',
validator: (val: string) => ['top', 'center', 'bottom'].includes(val)
},
showIcon: {
type: Boolean,
default: true
}
});
const visible = ref(false);
const text = ref('');
const icon = ref('');
let timer: NodeJS.Timeout | null = null;
const show = (message: string, iconName: string) => {
const show = (message: string, iconName = '') => {
if (timer) {
clearTimeout(timer);
}
@@ -54,9 +66,28 @@ defineExpose({
<style lang="scss" scoped>
.shortcut-toast {
@apply fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[9999];
@apply fixed left-1/2 z-[9999];
@apply flex items-center justify-center;
// 位置变体
&-center {
@apply top-1/2 -translate-y-1/2;
.shortcut-toast-content {
@apply p-2;
}
}
&-top {
@apply top-20;
}
&-bottom {
@apply bottom-40;
}
// 水平居中
@apply -translate-x-1/2;
&-content {
@apply flex flex-col items-center gap-2 p-4 rounded-lg;
@apply bg-light-200 bg-opacity-70 dark:bg-dark-200 dark:bg-opacity-90;

View File

@@ -5,7 +5,16 @@ import ShortcutToast from '@/components/ShortcutToast.vue';
let container: HTMLDivElement | null = null;
let toastInstance: any = null;
export function showShortcutToast(message: string, iconName: string) {
interface ToastOptions {
position?: 'top' | 'center' | 'bottom';
showIcon?: boolean;
}
export function showShortcutToast(
message: string,
iconName = '',
options: ToastOptions = {}
) {
// 如果容器不存在,创建一个新的容器
if (!container) {
container = document.createElement('div');
@@ -20,6 +29,8 @@ export function showShortcutToast(message: string, iconName: string) {
// 创建新的 toast 实例
const vnode = createVNode(ShortcutToast, {
position: options.position || 'center',
showIcon: options.showIcon !== undefined ? options.showIcon : true,
onDestroy: () => {
if (container) {
render(null, container);
@@ -35,6 +46,11 @@ export function showShortcutToast(message: string, iconName: string) {
// 显示 toast
if (toastInstance) {
toastInstance.show(message, iconName);
toastInstance.show(message, iconName, { showIcon: options.showIcon });
}
}
// 新增便捷方法 - 底部无图标 toast
export function showBottomToast(message: string) {
showShortcutToast(message, '', { position: 'bottom', showIcon: false });
}