mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-15 07:20:49 +08:00
feat: 优化提示组件,支持位置和图标显示选项
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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 });
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user