mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-25 00:37:24 +08:00
feat: 优化提示组件,支持位置和图标显示选项
This commit is contained in:
@@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<transition name="shortcut-toast">
|
<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-content">
|
||||||
<div class="shortcut-toast-icon">
|
<div v-if="showIcon" class="shortcut-toast-icon">
|
||||||
<i :class="icon"></i>
|
<i :class="icon"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="shortcut-toast-text">{{ text }}</div>
|
<div class="shortcut-toast-text">{{ text }}</div>
|
||||||
@@ -14,12 +14,24 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onBeforeUnmount, ref } from 'vue';
|
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 visible = ref(false);
|
||||||
const text = ref('');
|
const text = ref('');
|
||||||
const icon = ref('');
|
const icon = ref('');
|
||||||
let timer: NodeJS.Timeout | null = null;
|
let timer: NodeJS.Timeout | null = null;
|
||||||
|
|
||||||
const show = (message: string, iconName: string) => {
|
const show = (message: string, iconName = '') => {
|
||||||
if (timer) {
|
if (timer) {
|
||||||
clearTimeout(timer);
|
clearTimeout(timer);
|
||||||
}
|
}
|
||||||
@@ -54,9 +66,28 @@ defineExpose({
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.shortcut-toast {
|
.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;
|
@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 {
|
&-content {
|
||||||
@apply flex flex-col items-center gap-2 p-4 rounded-lg;
|
@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;
|
@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 container: HTMLDivElement | null = null;
|
||||||
let toastInstance: any = 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) {
|
if (!container) {
|
||||||
container = document.createElement('div');
|
container = document.createElement('div');
|
||||||
@@ -20,6 +29,8 @@ export function showShortcutToast(message: string, iconName: string) {
|
|||||||
|
|
||||||
// 创建新的 toast 实例
|
// 创建新的 toast 实例
|
||||||
const vnode = createVNode(ShortcutToast, {
|
const vnode = createVNode(ShortcutToast, {
|
||||||
|
position: options.position || 'center',
|
||||||
|
showIcon: options.showIcon !== undefined ? options.showIcon : true,
|
||||||
onDestroy: () => {
|
onDestroy: () => {
|
||||||
if (container) {
|
if (container) {
|
||||||
render(null, container);
|
render(null, container);
|
||||||
@@ -35,6 +46,11 @@ export function showShortcutToast(message: string, iconName: string) {
|
|||||||
|
|
||||||
// 显示 toast
|
// 显示 toast
|
||||||
if (toastInstance) {
|
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