From 97fe7e760ddbcd998f5683745c0215e2db0933f1 Mon Sep 17 00:00:00 2001
From: ElsaOOo <yjjjng0901@126.com>
Date: Tue, 30 Nov 2021 16:20:33 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20alert=E7=BB=84=E4=BB=B6=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E8=8B=B1=E6=96=87=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/en-US/components/alert/index.md      | 120 ++++++++++++++++++
 1 file changed, 120 insertions(+)
 create mode 100644 packages/devui-vue/docs/en-US/components/alert/index.md

diff --git a/packages/devui-vue/docs/en-US/components/alert/index.md b/packages/devui-vue/docs/en-US/components/alert/index.md
new file mode 100644
index 00000000..1b830ad7
--- /dev/null
+++ b/packages/devui-vue/docs/en-US/components/alert/index.md
@@ -0,0 +1,120 @@
+# Alert
+
+Display warnings to users.
+
+### When To Use
+
+When the page needs to send a warning message to users.
+
+### Basic Usage
+
+There are 4 types of Alert: success, danger, warning, info.
+
+:::demo
+
+```vue
+<template>
+  <div class="alert-demo-1">
+    <d-alert type="success" :closeable="false">success</d-alert>
+    <d-alert type="danger" :closeable="false">danger</d-alert>
+    <d-alert type="warning" :closeable="false">warning</d-alert>
+    <d-alert type="info" :closeable="false">info</d-alert>
+    <d-alert type="simple" :closeable="false">simple</d-alert>
+  </div>
+</template>
+<style>
+.alert-demo-1 .devui-alert {
+  margin-bottom: 20px;
+}
+</style>
+```
+
+:::
+
+### Closable Prompt
+
+The close button is displayed. Click to close the prompt.
+
+:::demo
+
+```vue
+<template>
+  <div class="alert-demo-2">
+    <d-alert type="success" @close="handleClose">success</d-alert>
+    <d-alert type="danger" @close="handleClose">danger</d-alert>
+    <d-alert type="warning" @close="handleClose">warning</d-alert>
+    <d-alert type="info" @close="handleClose">info</d-alert>
+    <d-alert type="simple" @close="handleClose">simple</d-alert>
+  </div>
+</template>
+<script>
+export default {
+  setup() {
+    const handleClose = ($event) => {
+      console.log($event)
+    }
+    return {
+      handleClose
+    }
+  }
+}
+</script>
+<style>
+.alert-demo-2 .devui-alert {
+  margin-bottom: 20px;
+}
+</style>
+```
+
+:::
+
+### Without Icon
+
+Without Icon.
+
+:::demo
+
+```vue
+<template>
+  <div class="alert-demo-3">
+    <d-alert type="success" :showIcon="false">success</d-alert>
+    <d-alert type="danger" :showIcon="false">danger</d-alert>
+    <d-alert type="warning" :showIcon="false">warning</d-alert>
+    <d-alert type="info" :showIcon="false">info</d-alert>
+    <d-alert type="simple" :showIcon="false">simple</d-alert>
+  </div>
+</template>
+<style>
+.alert-demo-3 .devui-alert {
+  margin-bottom: 20px;
+}
+</style>
+```
+
+:::
+
+### API
+
+### d-alert Parameter
+
+|  Parameter  |           Type            | Default |                    Description                     | Jump to Demo                    |
+| :---------: | :-----------------------: | :-----: | :------------------------------------------------: | :------------------------------ |
+|    type     | [`AlertType`](#AlertType) | 'info'  | Required. Specify the style of the warning prompt  | [Basic Usage](#basic-usage)     |
+|  cssClass   |         `string`          |   --    |           Optional. Customize className            |
+|  closeable  |         `boolean`         |  true   | Optional. The close button is displayed by default | [Basic Usage](#closable-prompt) |
+| dismissTime |         `number`          |   --    | Optional. Toggle off the delay time of Alert(`ms`) |
+|  showIcon   |         `boolean`         |  true   |   Optional. Whether to use the default type icon   | [Without Icon](#without-icon)   |
+
+### d-alert events
+
+| Parameter |              Type              | Description                                | Jump to Demo                        |
+| :-------: | :----------------------------: | :----------------------------------------- | ----------------------------------- |
+|   close   | `(event?: MouseEvent) => void` | Optional, triggers when click close button | [Closable Prompt](#closable-prompt) |
+
+### AlertType
+
+The default value is 'info', which specifies the type of alert warning.
+
+```ts
+export type AlertType = 'success' | 'danger' | 'warning' | 'info' | 'simple'
+```
-- 
Gitee