From 9492585fc228881c2f099762e2dc05f09d2c4729 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=B0=8F=E5=95=8A=E7=99=BD?= <2053890199@qq.com> Date: Tue, 18 Nov 2025 09:42:19 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9B=86=E6=88=90vant=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=BA=93=E5=B9=B6=E6=9B=BF=E6=8D=A2=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89message=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加vant依赖及unplugin-vue-components插件 - 移除自定义message组件及相关逻辑 - 使用vant的Dialog组件替代原有message功能 - 更新相关页面调用方式 --- components.d.ts | 22 ++++ package.json | 2 + pnpm-lock.yaml | 193 +++++++++++++++++++++++++++++++++ src/components/Message.vue | 213 ------------------------------------- src/components/message.ts | 176 ------------------------------ src/pages/home/index.vue | 63 +++++++---- vite.config.ts | 6 +- 7 files changed, 265 insertions(+), 410 deletions(-) create mode 100644 components.d.ts delete mode 100644 src/components/Message.vue delete mode 100644 src/components/message.ts diff --git a/components.d.ts b/components.d.ts new file mode 100644 index 0000000..1202f55 --- /dev/null +++ b/components.d.ts @@ -0,0 +1,22 @@ +/* eslint-disable */ +// @ts-nocheck +// biome-ignore lint: disable +// oxlint-disable +// ------ +// Generated by unplugin-vue-components +// Read more: https://github.com/vuejs/core/pull/3399 + +export {} + +/* prettier-ignore */ +declare module 'vue' { + export interface GlobalComponents { + ImageViewer: typeof import('./src/components/ImageViewer.vue')['default'] + Loading: typeof import('./src/components/Loading.vue')['default'] + Message: typeof import('./src/components/Message.vue')['default'] + RouterLink: typeof import('vue-router')['RouterLink'] + RouterView: typeof import('vue-router')['RouterView'] + VanButton: typeof import('vant/es')['Button'] + VanDialog: typeof import('vant/es')['Dialog'] + } +} diff --git a/package.json b/package.json index 507f108..160d9a2 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "dayjs": "^1.11.19", "qrcode.vue": "^3.6.0", "tailwindcss": "^4.1.17", + "vant": "^4.9.21", "vue": "^3.5.24", "vue-router": "^4.6.3" }, @@ -22,6 +23,7 @@ "@vitejs/plugin-vue": "^6.0.1", "@vue/tsconfig": "^0.8.1", "typescript": "~5.9.3", + "unplugin-vue-components": "^30.0.0", "vite": "^7.2.2", "vue-tsc": "^3.1.3" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 084c574..a901b7a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,9 @@ importers: tailwindcss: specifier: ^4.1.17 version: 4.1.17 + vant: + specifier: ^4.9.21 + version: 4.9.21(vue@3.5.24(typescript@5.9.3)) vue: specifier: ^3.5.24 version: 3.5.24(typescript@5.9.3) @@ -42,6 +45,9 @@ importers: typescript: specifier: ~5.9.3 version: 5.9.3 + unplugin-vue-components: + specifier: ^30.0.0 + version: 30.0.0(@babel/parser@7.28.5)(vue@3.5.24(typescript@5.9.3)) vite: specifier: ^7.2.2 version: 7.2.2(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2) @@ -449,6 +455,14 @@ packages: '@types/node@24.10.1': resolution: {integrity: sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==} + '@vant/popperjs@1.3.0': + resolution: {integrity: sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==} + + '@vant/use@1.6.0': + resolution: {integrity: sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==} + peerDependencies: + vue: ^3.0.0 + '@vitejs/plugin-vue@6.0.1': resolution: {integrity: sha512-+MaE752hU0wfPFJEUAIxqw18+20euHHdxVtMvbFcOEpjEyfqXH/5DCoTHiVJ0J29EhTJdoTkjEv5YBKU9dnoTw==} engines: {node: ^20.19.0 || >=22.12.0} @@ -516,6 +530,11 @@ packages: vue: optional: true + acorn@8.15.0: + resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==} + engines: {node: '>=0.4.0'} + hasBin: true + alien-signals@3.1.0: resolution: {integrity: sha512-yufC6VpSy8tK3I0lO67pjumo5JvDQVQyr38+3OHqe6CHl1t2VZekKZ7EKKZSqk0cRmE7U7tfZbpXiKNzuc+ckg==} @@ -529,16 +548,35 @@ packages: resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==} engines: {node: '>= 0.4'} + chokidar@4.0.3: + resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==} + engines: {node: '>= 14.16.0'} + combined-stream@1.0.8: resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} engines: {node: '>= 0.8'} + confbox@0.1.8: + resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==} + + confbox@0.2.2: + resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==} + csstype@3.1.3: resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} dayjs@1.11.19: resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==} + debug@4.4.3: + resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + delayed-stream@1.0.0: resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} engines: {node: '>=0.4.0'} @@ -583,6 +621,9 @@ packages: estree-walker@2.0.2: resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + exsolve@1.0.8: + resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==} + fdir@6.5.0: resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==} engines: {node: '>=12.0.0'} @@ -714,6 +755,10 @@ packages: resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==} engines: {node: '>= 12.0.0'} + local-pkg@1.1.2: + resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==} + engines: {node: '>=14'} + magic-string@0.30.21: resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} @@ -729,6 +774,12 @@ packages: resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==} engines: {node: '>= 0.6'} + mlly@1.8.0: + resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==} + + ms@2.1.3: + resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} + muggle-string@0.4.1: resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==} @@ -740,6 +791,9 @@ packages: path-browserify@1.0.1: resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==} + pathe@2.0.3: + resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==} + picocolors@1.1.1: resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} @@ -747,6 +801,12 @@ packages: resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==} engines: {node: '>=12'} + pkg-types@1.3.1: + resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==} + + pkg-types@2.3.0: + resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==} + postcss@8.5.6: resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==} engines: {node: ^10 || ^12 || >=14} @@ -759,6 +819,13 @@ packages: peerDependencies: vue: ^3.0.0 + quansync@0.2.11: + resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==} + + readdirp@4.1.2: + resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==} + engines: {node: '>= 14.18.0'} + rollup@4.53.2: resolution: {integrity: sha512-MHngMYwGJVi6Fmnk6ISmnk7JAHRNF0UkuucA0CUW3N3a4KnONPEZz+vUanQP/ZC/iY1Qkf3bwPWzyY84wEks1g==} engines: {node: '>=18.0.0', npm: '>=8.0.0'} @@ -784,9 +851,38 @@ packages: engines: {node: '>=14.17'} hasBin: true + ufo@1.6.1: + resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==} + undici-types@7.16.0: resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==} + unplugin-utils@0.3.1: + resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==} + engines: {node: '>=20.19.0'} + + unplugin-vue-components@30.0.0: + resolution: {integrity: sha512-4qVE/lwCgmdPTp6h0qsRN2u642tt4boBQtcpn4wQcWZAsr8TQwq+SPT3NDu/6kBFxzo/sSEK4ioXhOOBrXc3iw==} + engines: {node: '>=14'} + peerDependencies: + '@babel/parser': ^7.15.8 + '@nuxt/kit': ^3.2.2 || ^4.0.0 + vue: 2 || 3 + peerDependenciesMeta: + '@babel/parser': + optional: true + '@nuxt/kit': + optional: true + + unplugin@2.3.10: + resolution: {integrity: sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==} + engines: {node: '>=18.12.0'} + + vant@4.9.21: + resolution: {integrity: sha512-hXUoZMrLLjykimFRLDlGNd+K2iYSRh9YwLMKnsVdVZ+9inUKxpqnjhOqlZwocbnYkvJlS+febf9u9aJpDol4Pw==} + peerDependencies: + vue: ^3.0.0 + vite@7.2.2: resolution: {integrity: sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==} engines: {node: ^20.19.0 || >=22.12.0} @@ -849,6 +945,9 @@ packages: typescript: optional: true + webpack-virtual-modules@0.6.2: + resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==} + snapshots: '@babel/helper-string-parser@7.27.1': {} @@ -1103,6 +1202,12 @@ snapshots: dependencies: undici-types: 7.16.0 + '@vant/popperjs@1.3.0': {} + + '@vant/use@1.6.0(vue@3.5.24(typescript@5.9.3))': + dependencies: + vue: 3.5.24(typescript@5.9.3) + '@vitejs/plugin-vue@6.0.1(vite@7.2.2(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2))(vue@3.5.24(typescript@5.9.3))': dependencies: '@rolldown/pluginutils': 1.0.0-beta.29 @@ -1194,6 +1299,8 @@ snapshots: typescript: 5.9.3 vue: 3.5.24(typescript@5.9.3) + acorn@8.15.0: {} + alien-signals@3.1.0: {} asynckit@0.4.0: {} @@ -1211,14 +1318,26 @@ snapshots: es-errors: 1.3.0 function-bind: 1.1.2 + chokidar@4.0.3: + dependencies: + readdirp: 4.1.2 + combined-stream@1.0.8: dependencies: delayed-stream: 1.0.0 + confbox@0.1.8: {} + + confbox@0.2.2: {} + csstype@3.1.3: {} dayjs@1.11.19: {} + debug@4.4.3: + dependencies: + ms: 2.1.3 + delayed-stream@1.0.0: {} detect-libc@2.1.2: {} @@ -1282,6 +1401,8 @@ snapshots: estree-walker@2.0.2: {} + exsolve@1.0.8: {} + fdir@6.5.0(picomatch@4.0.3): optionalDependencies: picomatch: 4.0.3 @@ -1384,6 +1505,12 @@ snapshots: lightningcss-win32-arm64-msvc: 1.30.2 lightningcss-win32-x64-msvc: 1.30.2 + local-pkg@1.1.2: + dependencies: + mlly: 1.8.0 + pkg-types: 2.3.0 + quansync: 0.2.11 + magic-string@0.30.21: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 @@ -1396,16 +1523,39 @@ snapshots: dependencies: mime-db: 1.52.0 + mlly@1.8.0: + dependencies: + acorn: 8.15.0 + pathe: 2.0.3 + pkg-types: 1.3.1 + ufo: 1.6.1 + + ms@2.1.3: {} + muggle-string@0.4.1: {} nanoid@3.3.11: {} path-browserify@1.0.1: {} + pathe@2.0.3: {} + picocolors@1.1.1: {} picomatch@4.0.3: {} + pkg-types@1.3.1: + dependencies: + confbox: 0.1.8 + mlly: 1.8.0 + pathe: 2.0.3 + + pkg-types@2.3.0: + dependencies: + confbox: 0.2.2 + exsolve: 1.0.8 + pathe: 2.0.3 + postcss@8.5.6: dependencies: nanoid: 3.3.11 @@ -1418,6 +1568,10 @@ snapshots: dependencies: vue: 3.5.24(typescript@5.9.3) + quansync@0.2.11: {} + + readdirp@4.1.2: {} + rollup@4.53.2: dependencies: '@types/estree': 1.0.8 @@ -1459,8 +1613,45 @@ snapshots: typescript@5.9.3: {} + ufo@1.6.1: {} + undici-types@7.16.0: {} + unplugin-utils@0.3.1: + dependencies: + pathe: 2.0.3 + picomatch: 4.0.3 + + unplugin-vue-components@30.0.0(@babel/parser@7.28.5)(vue@3.5.24(typescript@5.9.3)): + dependencies: + chokidar: 4.0.3 + debug: 4.4.3 + local-pkg: 1.1.2 + magic-string: 0.30.21 + mlly: 1.8.0 + tinyglobby: 0.2.15 + unplugin: 2.3.10 + unplugin-utils: 0.3.1 + vue: 3.5.24(typescript@5.9.3) + optionalDependencies: + '@babel/parser': 7.28.5 + transitivePeerDependencies: + - supports-color + + unplugin@2.3.10: + dependencies: + '@jridgewell/remapping': 2.3.5 + acorn: 8.15.0 + picomatch: 4.0.3 + webpack-virtual-modules: 0.6.2 + + vant@4.9.21(vue@3.5.24(typescript@5.9.3)): + dependencies: + '@vant/popperjs': 1.3.0 + '@vant/use': 1.6.0(vue@3.5.24(typescript@5.9.3)) + '@vue/shared': 3.5.24 + vue: 3.5.24(typescript@5.9.3) + vite@7.2.2(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2): dependencies: esbuild: 0.25.12 @@ -1497,3 +1688,5 @@ snapshots: '@vue/shared': 3.5.24 optionalDependencies: typescript: 5.9.3 + + webpack-virtual-modules@0.6.2: {} diff --git a/src/components/Message.vue b/src/components/Message.vue deleted file mode 100644 index c8b5e60..0000000 --- a/src/components/Message.vue +++ /dev/null @@ -1,213 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/message.ts b/src/components/message.ts deleted file mode 100644 index 3b0cfe3..0000000 --- a/src/components/message.ts +++ /dev/null @@ -1,176 +0,0 @@ -import { createApp, h } from 'vue' -import Message from './Message.vue' - -// 消息配置接口 -export interface MessageOptions { - message: string - type?: 'success' | 'error' | 'warning' | 'info' - duration?: number - showIcon?: boolean - closable?: boolean - customClass?: string - offset?: number - center?: boolean - onClose?: () => void -} - -// 消息实例接口 -interface MessageInstance { - close: () => void -} - -// 消息容器 -const messageContainer = document.createElement('div') -messageContainer.className = 'message-container-wrapper' -document.body.appendChild(messageContainer) - -// 默认配置 -const defaultOptions: Partial = { - duration: 3000, - showIcon: true, - closable: false, - offset: 20, - center: false -} - -// 消息管理类 -class MessageService { - private instances: MessageInstance[] = [] - - // 创建消息实例 - private createMessage(options: string | MessageOptions): MessageInstance { - // 标准化配置 - const finalOptions = typeof options === 'string' - ? { message: options, ...defaultOptions } - : { ...defaultOptions, ...options } - - // 创建容器元素 - const container = document.createElement('div') - messageContainer.appendChild(container) - - // 创建应用实例 - // 保存对this的引用以避免上下文问题 - const self = this - const app = createApp({ - render: () => { - return h(Message, { - ...finalOptions, - onClose: () => { - self.closeInstance(instance) - finalOptions.onClose?.() - } - }) - } - }) - - // 挂载组件 - app.mount(container) - - // 计算垂直偏移 - const verticalOffset = this.calculateOffset(finalOptions.offset ?? 0) - container.style.cssText = ` - position: fixed; - top: ${verticalOffset}px; - left: 50%; - transform: translateX(-50%); - z-index: 9999; - ` - - // 创建实例对象 - const instance: MessageInstance = { - close: () => { - this.closeInstance(instance) - } - } - - // 保存实例 - this.instances.push(instance) - - return instance - } - - // 计算垂直偏移 - private calculateOffset(baseOffset: number): number { - if (this.instances.length === 0) { - return baseOffset - } - - let offset = baseOffset - this.instances.forEach(() => { - // 假设每个消息高度约为60px，间距为12px - offset += 60 + 12 - }) - - return offset - } - - // 关闭指定实例 - private closeInstance(instance: MessageInstance): void { - const index = this.instances.indexOf(instance) - if (index !== -1) { - this.instances.splice(index, 1) - - // 重新计算所有消息的位置 - this.updateOffsets() - } - } - - // 更新所有消息的位置 - private updateOffsets(): void { - let offset = defaultOptions.offset || 20 - const messageElements = messageContainer.querySelectorAll('div > div') - - messageElements.forEach((element, index) => { - if (index < this.instances.length) { - (element.parentElement as HTMLElement).style.top = `${offset}px` - offset += 60 + 12 - } - }) - } - - // 显示普通消息 - info(options: string | MessageOptions): MessageInstance { - return this.createMessage(typeof options === 'string' - ? { message: options, type: 'info' } - : { ...options, type: 'info' } - ) - } - - // 显示成功消息 - success(options: string | MessageOptions): MessageInstance { - return this.createMessage(typeof options === 'string' - ? { message: options, type: 'success' } - : { ...options, type: 'success' } - ) - } - - // 显示错误消息 - error(options: string | MessageOptions): MessageInstance { - return this.createMessage(typeof options === 'string' - ? { message: options, type: 'error' } - : { ...options, type: 'error' } - ) - } - - // 显示警告消息 - warning(options: string | MessageOptions): MessageInstance { - return this.createMessage(typeof options === 'string' - ? { message: options, type: 'warning' } - : { ...options, type: 'warning' } - ) - } - - // 关闭所有消息 - closeAll(): void { - this.instances.forEach(instance => { - instance.close() - }) - this.instances = [] - } -} - -// 导出消息服务实例 -export const message = new MessageService() - -// 提供默认导出 -export default message \ No newline at end of file diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index 917c94f..b8eda37 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -35,7 +35,7 @@ @@ -45,7 +45,7 @@ @@ -87,7 +87,7 @@ @@ -133,12 +133,13 @@