🧪 test(vite-plugin-autogeneration-import-file-test-app-1): 测试 showVue…

…3Toastify 。了解到该库的自定义按钮配置麻烦，仍旧需要二次配置才好用。

vite-plugin-autogeneration-import-file/app/package.json

@@ -15,7 +15,8 @@
 	},
 	"dependencies": {
 		"vue": "^3.5.12",
-		"vue-sonner": "^1.2.4"
+		"vue-sonner": "^1.2.4",
+		"vue3-toastify": "^0.2.4"
 	},
 	"devDependencies": {
 		"@ruan-cat-test/vite-plugin-autogeneration-import-file": "workspace:^",

vite-plugin-autogeneration-import-file/app/src/components/HelloWorld.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { toast as vueSonnerToast } from "vue-sonner";
+import { toast as vue3Toastify } from "vue3-toastify";
 
 defineProps<{ msg: string }>();
 
@@ -17,10 +18,23 @@ function showVueSonnerToast() {
 		duration: Infinity,
 	});
 }
+
+function showVue3Toastify() {
+	const resolvePromise = new Promise((resolve) => setTimeout(resolve, 1000));
+
+	/**
+	 * 注意到该库的自定义按钮 并不方便。暂时留着不使用。
+	 */
+	vue3Toastify.promise(resolvePromise, {
+		pending: "Promise is pending",
+		success: "Promise resolved 👌",
+		error: "Promise rejected 🤯",
+	});
+}
 </script>
 
 <template>
-	<h1 @click="showVueSonnerToast">{{ msg }}</h1>
+	<h1 @click="showVue3Toastify">{{ msg }}</h1>
 
 	<div class="card">
 		<button type="button" @click="count++">count is {{ count }}</button>

vite-plugin-autogeneration-import-file/app/src/components/vue3-toastify-pending.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { ref, computed, watch } from "vue";
+</script>
+
+<template>
+	<section class="vue3-toastify-pending-root"></section>
+</template>
+
+<style lang="scss" scoped>
+.vue3-toastify-pending-root {
+}
+</style>

vite-plugin-autogeneration-import-file/app/src/main.ts

@@ -2,4 +2,20 @@ import { createApp } from "vue";
 import "./style.css";
 import App from "./App.vue";
 
-createApp(App).mount("#app");
+import Vue3Toasity, { type ToastContainerOptions } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
+
+const app = createApp(App);
+
+app.use(Vue3Toasity, <ToastContainerOptions>{
+	autoClose: 3000,
+	multiple: true,
+	limit: 9,
+	position: "bottom-right",
+	transition: "slide",
+	// hideProgressBar: false,
+	closeOnClick: true,
+	closeButton: true,
+});
+
+app.mount("#app");