u

2026-10-08 22:38:34 +08:00
1 parent f572dce2f6
commit e99a9fb274
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+// 四种类型：info / success / warning / error
+import { G3Button, G3Message, G3Space } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Space :size="[8, 8]" wrap>
+    <G3Button type="outline" @click="G3Message.info('普通提示')">info</G3Button>
+    <G3Button type="outline" @click="G3Message.success('保存成功')">success</G3Button>
+    <G3Button type="outline" @click="G3Message.warning('磁盘空间不足 10%')">warning</G3Button>
+    <G3Button type="outline" @click="G3Message.error('保存失败，请重试')">error</G3Button>
+  </G3Space>
+</template>
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+// 选项：duration 自动关闭时长（<=0 不关闭）、closable 手动关闭、handle.close() 立即关闭
+import { G3Button, G3Message, G3Space } from '@g3soft/ui'
+
+function openSticky() {
+  G3Message.error('这条不会自动消失，需要手动关闭', { duration: 0, closable: true })
+}
+
+function openAndClose() {
+  const handle = G3Message.info('1.5 秒后由代码关闭', { duration: 0 })
+  setTimeout(() => handle.close(), 1500)
+}
+</script>
+
+<template>
+  <G3Space :size="[8, 8]" wrap>
+    <G3Button type="outline" @click="openSticky">不自动关闭</G3Button>
+    <G3Button type="outline" @click="openAndClose">代码关闭</G3Button>
+    <G3Button type="outline" @click="G3Message.success('5 秒后关闭', { duration: 5000 })">
+      自定义时长
+    </G3Button>
+  </G3Space>
+</template>
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// placement：9 个方位；也可以用 Message.config() 设全局默认
+import { G3Button, G3Message, G3Space } from '@g3soft/ui'
+
+const placements = [
+  'top-left',
+  'top-center',
+  'top-right',
+  'center',
+  'bottom-center',
+  'bottom-right',
+] as const
+</script>
+
+<template>
+  <G3Space :size="[8, 8]" wrap>
+    <G3Button
+      v-for="placement in placements"
+      :key="placement"
+      type="outline"
+      size="small"
+      @click="G3Message.info(`出现在 ${placement}`, { placement })"
+    >
+      {{ placement }}
+    </G3Button>
+  </G3Space>
+</template>