u

code/base-project/base-vue/packages/ao-design/src/message/demo.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { useMessage } from '@ao/ao-design'
+
+const message = useMessage()
+
+function showMessage(placement: any) {
+  message.success({
+    message: `这里是 ${placement} 提示`,
+    placement,
+  })
+}
+function closeOne() {
+  const handle = message.success({
+    message: '测试',
+    duration: 0,
+    showClose: true,
+  })
+}
+
+function showMessageType(type: any) {
+  message.success({
+    message: `这里是 ${type} 提示`,
+    type,
+  })
+}
+</script>
+
+<template>
+  <div class="demo">
+    <div class="row">
+      <AButton status="primary" @click="showMessage('top-start')">
+        Top Start
+      </AButton>
+      <AButton status="primary" @click="showMessage('top')">
+        Top
+      </AButton>
+      <AButton status="primary" @click="showMessage('top-end')">
+        Top End
+      </AButton>
+    </div>
+
+    <div class="row">
+      <AButton status="primary" @click="showMessage('left')">
+        Left
+      </AButton>
+      <AButton status="primary" @click="showMessage('center')">
+        Center
+      </AButton>
+      <AButton status="primary" @click="showMessage('right')">
+        Right
+      </AButton>
+    </div>
+
+    <div class="row">
+      <AButton status="primary" @click="showMessage('bottom-start')">
+        Bottom Start
+      </AButton>
+      <AButton status="primary" @click="showMessage('bottom')">
+        Bottom
+      </AButton>
+      <AButton status="primary" @click="showMessage('bottom-end')">
+        Bottom End
+      </AButton>
+    </div>
+
+    <div class="row">
+      <AButton status="primary" @click="message.closeAll">
+        Close All
+      </AButton>
+
+      <AButton
+        status="primary" @click="closeOne"
+      >
+        Show No Close
+      </AButton>
+    </div>
+
+    <div class="row">
+      <AButton status="primary" @click="showMessageType('info')">
+        info
+      </AButton>
+      <AButton status="primary" @click="showMessageType('success')">
+        success
+      </AButton>
+      <AButton status="primary" @click="showMessageType('warning')">
+        warning
+      </AButton>
+      <AButton status="primary" @click="showMessageType('error')">
+        error
+      </AButton>
+      <AButton status="primary" @click="showMessageType('loading')">
+        loading
+      </AButton>
+      <AButton status="primary" @click="showMessageType('question')">
+        question
+      </AButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.demo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  margin-top: 40px;
+}
+
+.row {
+  display: flex;
+  gap: 12px;
+}
+</style>