+ )
+ }
+ }
+})
\ No newline at end of file
diff --git a/docs/en-US/components/anchor/index.md b/docs/en-US/components/anchor/index.md
new file mode 100644
index 00000000..08f7664b
--- /dev/null
+++ b/docs/en-US/components/anchor/index.md
@@ -0,0 +1,80 @@
+# anchor
+
+
+
+# When to use
+
+
+Use in the page:
+
+```html
+
+
+
+
anchorlink-one
+
anchorlink-two
+
anchorlink-three
+
anchorlink-four
+
+
+
+ anchorlink-one1
+
+
+ anchorlink-two
+
+
+ anchorlink-three
+
+
+ anchorlink-four
+
+
+
+```
+
+# dAnchor
+
+Define an anchor point。
+### dAnchor parameter
+
+| parameter | type | default | illustrate | jump Demo |config|
+| :----------------: | :----------: | :------: | :--: | :---------------------------------------------------: | ---------------------------- |
+| dAnchor | `string` | -- | required, set an anchor name | [basic usage](demo#basic-usage) |
+| anchorActive | `string` | -- | Optional, when the anchor point is activated, the corresponding css class name for the module to take effect | [basic usage](demo#basic-usage) |
+
+### dAnchor activation event
+
+The following classes are automatically added to the anchor points to correspond to different activated objects。
+
+| css classname | Representative meaning |
+| :---------------------------: | :--------------------: |
+| anchor-active-by-anchor-link | Click on the anchor link to activate |
+| anchor-active-by-scroll | The container is scrolled to the anchor point to activate |
+| anchor-active-by-click-inside | Click on the content inside the anchor to activate |
+| anchor-active-by-initial | Initialize scroll bar position activation |
+
+# dAnchorLink
+
+Define a link with an anchor point. Clicking on the link will slide to the anchor point. When the anchor point is at the top of the page, the link class will be activated。
+
+### dAnchorLink parameter
+
+| parameter | type | default | illustrate | jump Demo |config|
+| :----------------: | :----------: | :------: | :--: | :---------------------------------------------------: | ---------------------------- |
+| dAnchorLink | `string` | -- | required, click the name of the target anchor point to slide | [basic usage](demo#basic-usage) |
+| anchorActive | `string` | -- | optional, when the anchor point is active, the css class name corresponding to the effective link | [basic usage](demo#basic-usage) |
+
+# dAnchorBox
+
+There must be a container, otherwise the function cannot be used。
+
+Define a container for scanning anchor points and place it on the common parent node of dAnchor and dAnchorLink for communication between anchor points and links。
diff --git a/docs/en-US/components/avatar/index.md b/docs/en-US/components/avatar/index.md
new file mode 100644
index 00000000..3ca64429
--- /dev/null
+++ b/docs/en-US/components/avatar/index.md
@@ -0,0 +1,23 @@
+# Avatar
+
+The component that displays the user's avatar。
+
+### When to use
+
+当需要显示用户头像时。
+
+### Basic rules of avatar display
+
+When the 'name' attribute is passed to the avatar component, the avatar field will be displayed according to certain rules. Please refer to the API for specific rules。
+
+
+
+
+
+
+```html
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/en-US/components/badge/index.md b/docs/en-US/components/badge/index.md
new file mode 100644
index 00000000..2eb62674
--- /dev/null
+++ b/docs/en-US/components/badge/index.md
@@ -0,0 +1,178 @@
+# Badge
+
+The round logo number in the upper right corner of the icon。
+
+### When to use
+
+Appears in the upper right corner of the icon or to the right of the list item, and prompts the user when there is a message to be processed through different status colors and numbers。
+
+### Basic Badge
+
+The basic badge type. When there is a package element, the badge and number will be displayed in the upper right corner。
+
+Unread message
+Unread message
+Unread message
+Unread message
+
+```html
+Unread message
+Unread message
+Unread message
+Unread message
+```
+
+### Dot Badge
+
+Dot badge type. When there is a package element and the showDot parameter is true, it is a dot badge. By default, small dots are displayed in the upper right corner and the number is not displayed。
+
+Unread message
+Unread message
+
+
+
+
+
+
+
+```html
+Unread message
+Unread message
+
+
+
+
+
+
+```
+
+### Count Badge
+
+When the badge is used independently and does not wrap any elements, only the badge status color and number are displayed。
+
+
+
+ Unread message
+
+
+
+ Personal message
+
+
+
+
+```html
+
+
+ System message
+
+
+
+ Personal message
+
+
+
+```
+
+### Status Badge
+
+When the badge is used independently, does not wrap any elements, and the showDot parameter is true, it is a state badge, and different states show different color points。
+
+ danger
+ warning
+ waiting
+ info
+ success
+
+```html
+ danger
+ warning
+ waiting
+ info
+ success
+```
+
+### Badge Position
+
+Set the badge position through the badgePos parameter。
+
+Unread message
+Unread message
+
+
+
+
+
+
+```html
+Unread message
+Unread message
+
+
+
+
+
+
+```
+
+### Define
+
+The badge display status color is set through the bgColor parameter (the badge status color set by the status parameter is invalid at this time), and the badge offset relative to the badgePos can be set through the offsetXY parameter. Customize text and background color through textColor and bgColor。
+
+
+
+
+
+
+
+Unread message
+Unread message
+
+
+```html
+
+
+
+
+
+
+Unread message
+Unread message
+
+```
+
+### API
+
+| parameter | type | default | illustrate |
+| :-------: | :-----------------: | :---------: | :--------------------------------------------------------------------------------------------------------------------------- |
+| count | `Number` | -- | Optionally, set the number displayed in the basic badge and count badge |
+| maxCount | `Number` | 99 | Optional, set the maximum number of basic badges and count badges that can be displayed, and display maxCount+ when count> maxCount |
+| showDot | `Boolean` | false | Optional, when true, it is a dot badge (with package) or status badge (without package); when it is false, it is a basic badge (with package) or counting badge (without package) |
+| status | `BadgeStatusType` | -- | Optional, status color danger\| warning \| waiting \| success \| info |
+| badgePos | `BadgePositionType` | 'top-right' | Optional, logo position top-left\| top-right \| bottom-left \| bottom-right |
+| bgColor | `String` | -- | Optional, customize the logo color, at this time the badge status color set by the status parameter is invalid |
+| textColor | `String` | -- | Optional, logo text color can be customized |
+| offsetXY | `[number, number] ` | -- | Optional, optional, the logo position offset when there is a package, the format is [x,y], and the unit is px. x is the offset relative to right or left, and y is the offset relative to top or bottom |
+
+
diff --git a/docs/en-US/components/button/index.md b/docs/en-US/components/button/index.md
new file mode 100644
index 00000000..4870da3b
--- /dev/null
+++ b/docs/en-US/components/button/index.md
@@ -0,0 +1,27 @@
+# Button
+
+The button is used to start an instant operation。
+
+### When to use
+
+An operation command (or a group of encapsulation) is marked, and the corresponding business logic is triggered in response to the user's click behavior。
+
+### Main button
+
+Primary
+Disabled
+
+```html
+Primary
+Disabled
+```
+
+### Secondary button
+
+Common
+Disabled
+
+```html
+Common
+Disabled
+```
\ No newline at end of file
diff --git a/docs/en-US/components/card/index.md b/docs/en-US/components/card/index.md
new file mode 100644
index 00000000..d81ada82
--- /dev/null
+++ b/docs/en-US/components/card/index.md
@@ -0,0 +1,220 @@
+# Card
+
+Universal card container。
+
+### When to use
+
+Basic card container, which can contain text, lists, pictures, paragraphs, used for overview display。
+
+
+### Basic usage
+
+
+
+
+
+
+ DEVUI Course
+
+
+ DevUI
+
+
+ DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are basedon...
+
+
+
+ 12
+
+
+ 8
+
+
+ 8
+
+
+
+
+```html
+
+
+
+
+
+ DEVUI Course
+
+
+ DevUI
+
+
+ DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are basedon...
+
+
+
+ 12
+
+
+ 8
+
+
+ 8
+
+
+
+```
+
+### Use image
+
+The alignment of the d-card-actions operation area can be set through align: initial alignment, tail alignment, stretch alignment。
+
+
+
+
+
+
+ DEVUI Course
+
+
+ DevUI
+
+
+ DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are basedon...
+
+
+
+ 12
+
+
+ 8
+
+
+ 8
+
+
+
+
+```html
+
+
+
+
+
+ DEVUI Course
+
+
+ DevUI
+
+
+ DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are basedon...
+
+
+
+ 12
+
+
+ 8
+
+
+ 8
+
+
+
+```
+
+### Custom Area
+
+
+
+
+
+
+
+ DEVUI Course
+
+
+
Updated at Dec 31 15:55
+
+
+
+
+
+
+
+```html
+
+
+
+
+
+
+ DEVUI Course
+
+
+
Updated at Dec 31 15:55
+
+
+
+
+
+
+```
+
\ No newline at end of file
diff --git a/docs/en-US/components/carousel/index.md b/docs/en-US/components/carousel/index.md
new file mode 100644
index 00000000..4fad5733
--- /dev/null
+++ b/docs/en-US/components/carousel/index.md
@@ -0,0 +1,162 @@
+# Carousel
+
+A set of carousel areas。
+
+### When to use
+
+1. Used to display pictures or cards。
+
+### Basic usage
+
+ {{ item }}
+
+
+```html
+
+ {{ item }}
+
+```
+```css
+.d-carousel-item {
+ text-align: center;
+ line-height: 200px;
+ background: var(--devui-global-bg, #f3f6f8);
+}
+```
+### 指示器&切换箭头
+arrowTrigger设为always可以使箭头永久显示，dotTrigger设为hover可以使hover到点上就切换。
+
+
+ {{ item }}
+
+
+```html
+
+ {{ item }}
+
+```
+### Automatic carousel
+
+ {{ item }}
+
+
+```html
+
+ {{ item }}
+
+```
+### Custom action
+
+ {{ item }}
+
+
+ 上一张
+ 下一张
+ 第一张
+
+
+```html
+
+ {{ item }}
+
+
+ 上一张
+ 下一张
+ 第一张
+
+```
+```css
+.carousel-demo-operate{
+ margin-top: 10px;
+
+ display: flex;
+ align-items: center;
+
+ > * {
+ margin-right: 20px;
+ }
+}
+```
+
+### API
+#### parameter
+
+| parameter | type | default | description | jump Demo |
+| :----------: | :--------------------------: | :------: | :---------------------------------------------- | ------------------------------------------------ |
+| arrowTrigger | `'hover'\|'never'\|'always'` | 'hover' | Optional, specify the switching arrow display mode | [Indicator-switch-arrow](#Indicator-switch-arrow) |
+| autoplay | `boolean` | false | Optional, whether to rotate automatically | [Automatic-carousel](#Automatic-carousel) |
+| autoplaySpeed | `number` | 3000 | Optional, used with `autoplay`, automatic rotation speed, unit: ms | [Automatic-carousel](#Automatic-carousel) |
+| height | `string` | '100%' | Optional, carousel container height | [Basic-usage](#Basic-usage) |
+| showDots | `boolean` | true | Optional, whether to display the panel indicator | [Automatic-carousel](#Automatic-carousel) |
+| dotPosition | `'top'\|'bottom'` | 'bottom' | Optional, panel indicator position | [Indicator-switch-arrow](#Indicator-switch-arrow) |
+| dotTrigger | `'click'\|'hover'` | 'click' | Optional, indicator triggers carousel mode | [Indicator-switch-arrow](#Indicator-switch-arrow) |
+| activeIndex | `number` | 0 | Optional, initialize the active card index, starting from 0, supporting `[(activeIndex)]` two-way binding | [Basic-usage](#Basic-usage) |
+
+#### Event
+
+| event | type | description | jump Demo |
+| :----------------: | :---------------------: | :-----------------------------------------: | ------------------------------------------------- |
+| activeIndexChange | `EventEmitter` | When the card is switched, return to the index of the current card, starting from 0 | [Basic-usage](#Basic-usage) |
+
+#### methods
+
+| methods | description | jump Demo |
+| :---------: | :---------------------------------- | :----------------------------- |
+| prev() | Switch to the previous card | [Custom-action](#Custom-action) |
+| next() | Switch to the next card | [Custom-action](#Custom-action) |
+| goTo(index) | Switch to the card with the specified index, the index starts from 0 | [Custom-action](#Custom-action) |
+
+
+
+
\ No newline at end of file
diff --git a/docs/en-US/components/checkbox/index.md b/docs/en-US/components/checkbox/index.md
new file mode 100644
index 00000000..1cd4822d
--- /dev/null
+++ b/docs/en-US/components/checkbox/index.md
@@ -0,0 +1,42 @@
+# CheckBox
+
+CheckBox。
+
+### When to use
+
+1. Make multiple choices in a set of options；
+2. Used alone can indicate switching between the two states, and can be combined with the submit operation。
+
+### Basic usage
+
+
+
+
+```html
+
+
+```
+
+#### use CheckboxGroup
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/en-US/components/date-picker/index.md b/docs/en-US/components/date-picker/index.md
new file mode 100644
index 00000000..6ec80542
--- /dev/null
+++ b/docs/en-US/components/date-picker/index.md
@@ -0,0 +1,121 @@
+
+
+# DatePicker
+
+Date and time visual input。
+
+## Attributes auto-close
+
+|project|description|
+|----|----|
+|name|auto-close / autoClose|
+|type|boolean|
+|mustSelect|false|
+|default|false|
+|description|After selecting the date, whether to automatically close the date panel|
+
+```vue
+
+
+
+
+
+
+
+```
+
+
+
+
+## Attributes range
+
+|project|description|
+|----|----|
+|name|range|
+|type|boolean|
+|mustSelect|false|
+|default|false|
+|description|Whether to open interval selection|
+
+```vue
+
+
+
+
+
+
+
+```
+
+
+
+## Attributes format
+
+|project|type|
+|----|----|
+|name|format|
+|type|string|
+|mustSelect|false|
+|default|y/MM/dd|
+|description|Date value format|
+
+
+
+
+```vue
+
+
+```
+
+**Date formatting characters**
+
+|character|description|rule|
+|----|----|----|
+|y, yy, yyyy|year|When using `yy`, only the last 2 digits are displayed, otherwise 4 digits are displayed。for example:`yy/MM/dd -> 21/01/02`， `y/MM/dd -> 2021/01/02`|
+|M,MM|month|When using `MM`, the left side of a one-digit number will automatically add `0`。for example: `y/MM/dd -> 2021/01/02`，`y/M/d -> 2021/1/2`|
+|d,dd|date|rule reference`M`|
+|h,hh|hour|rule reference`M`；Use 24-hour representation。|
+|m,mm|minute|rule reference`M`|
+|s,ss|second|rule reference`M`|
+
+## Attributes range-spliter
+
+|project|type|
+|----|----|
+|name|range-spliter / rangeSpliter|
+|type|string|
+|mustSelect|false|
+|default|-|
+|description|In interval selection mode, the character that separates the start and end time。|
+
+```vue
+
+```
+
+
+
+## Event selectedDateChange
+
+```vue
+
+
+```
+
+
+
\ No newline at end of file
diff --git a/docs/en-US/components/icon/index.md b/docs/en-US/components/icon/index.md
new file mode 100644
index 00000000..45ba44f2
--- /dev/null
+++ b/docs/en-US/components/icon/index.md
@@ -0,0 +1,71 @@
+# Icon 图标
+
+用于显示图标。
+
+### 何时使用
+
+需要显示图标时。
+
+所有内置的图标可在DevUI官网进行查看：
+
+[https://devui.design/icon/ruleResource](https://devui.design/icon/ruleResource)
+
+### 基本用法
+
+
+
+
+
+
+```html
+
+
+
+
+```
+
+### 自定义字体图标
+
+Icon 组件默认引用 DevUI 图标库的图标，如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。
+
+```css
+@font-face {
+ font-family: "my-icon";
+ src: url("./my-icon.ttf") format("truetype");
+}
+
+.my-icon {
+ font-family: "my-icon";
+}
+
+.my-icon-right::before {
+ content: "\E03F";
+}
+```
+
+引入字体图标的 css
+
+```css
+@import "my-icon.css";
+```
+
+or
+
+```js
+import "my-icon.css";
+```
+
+使用
+
+```html
+
+```
+
+### API
+
+| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
+| :---------: | :------: | :-------: | :----------------------- | --------------------------------- |
+| name | `String` | -- | 必选，Icon 名称 | [基本用法](#基本用法) |
+| size | `String` | '16px' | 可选，图标大小 | [基本用法](#基本用法) |
+| color | `String` | '#252b3a' | 可选，图标颜色 | [基本用法](#基本用法) |
+| classPrefix | `String` | 'icon' | 可选，自定义字体图标前缀 | [自定义字体图标](#自定义字体图标) |
diff --git a/docs/en-US/components/image-preview/index.md b/docs/en-US/components/image-preview/index.md
new file mode 100644
index 00000000..481641d3
--- /dev/null
+++ b/docs/en-US/components/image-preview/index.md
@@ -0,0 +1,137 @@
+# ImagePreview
+
+Preview the components of one or more pictures。
+
+### When to use
+
+When you need to preview the image or preview the image in the container according to the user input。
+
+### Basic usage
+
+Use the v-d-image-preview command to preview the image in the container。
+
+
+
+
+
+```html
+
+
+
+
+
+```
+
+### Custom open preview window
+
+Pass in the custom parameter, the command will be automatically injected into the open method, and the preview window will be opened through custom.open
+
+
+
+
+自定义
+
+```html
+
+
+
+自定义
+
+
+```
+
+### Set zIndex
+
+Set zIndex to control the level of the pop-up effect, and set backDropZIndex to control the level of the background of the pop-up layer。
+You can see that when zIndex is set to be less than backDropZIndex, imagePreview will be displayed below the background。
+You can close imagePreview by Esc。
+
+```
+// 待嵌入 modal 组件即可
+```
+
+### API
+
+| parameter | type | default | description |
+| :------------: | :-------: | :---: | :------------------------------------------------------------ |
+| custom | `Object` | -- | Optional, the command will be automatically injected into the open method, and the preview window will be opened through custom.open |
+| disableDefault | `Boolean` | false | Optional, turn off the default click trigger image preview mode |
+| zIndex | `Number` | 1050 | Optional, optional, set the z-index value of the picture when previewing |
+| backDropZIndex | `Number` | 1040 | Optional, set the z-index value of the image background during preview |
+
+
+
+
diff --git a/docs/en-US/components/input/index.md b/docs/en-US/components/input/index.md
new file mode 100644
index 00000000..edc7f8fa
--- /dev/null
+++ b/docs/en-US/components/input/index.md
@@ -0,0 +1,96 @@
+# Input
+
+Text input。
+
+### When to use
+
+You need to manually enter text to use。
+
+### Basic usage
+
+:::demo
+
+```vue
+
+
+
+
+
+```
+
+:::
+
+
+### Password
+
+:::demo
+
+```vue
+
+
+
+
+```
+
+:::
+
+### API
+
+| parameter | type | default | description | jump Demo |
+| :---------: | :------: | :-------: | :-----------------------: | :---------------------------------: |
+| id | `string` | -- | Optional, text box id | [Basic-usage](#Basic-usage) |
+| placeholder | `string` | -- | Optional，textarea placeholder | [Basic-usage](#Basic-usage) |
+| maxLength | `number` | Number.MAX_SAFE_INTEGER | Optional, the max-length of the input box | |
+| disabled | `boolean` | false | Optional，Whether the text box is disabled | [Basic-usage](#Basic-usage) |
+| error | `boolean` | false | Optional，Whether there is an input error in the text box | [Basic-usage](#Basic-usage) |
+| size | `'sm'\|''\|'lg'` | '' | Optional，There are three options for the size of the text box`'lg'`,`''`,`'sm'` | [Size](#Size) |
+| cssClass | `string` | '' | Optional，Support to pass in the class name to the input box | |
+| showPassword | `boolean` | false | Optional，password | [Password](#Password) |
+| autoFocus | `boolean` | false | Optional，Whether the input box is auto-focused | [Basic-usage](#Basic-usage) |
+
diff --git a/docs/en-US/components/loading/index.md b/docs/en-US/components/loading/index.md
new file mode 100644
index 00000000..5c0a61f5
--- /dev/null
+++ b/docs/en-US/components/loading/index.md
@@ -0,0 +1,298 @@
+# Loading
+
+Prompt the user that the page is executing instructions and needs to wait。
+
+### When to use
+
+When the execution time is long (it takes more than a few seconds), show the user the status of execution。
+
+
+### Basic usage
+Show the basic usage in the scene of loading table data。
+:::demo
+
+```vue
+
+ click me!
+
+
+
+
+
+
+```
+:::
+
+### Service method call
+Use the service method to load the loading component in full screen or load the loading component on the specified host。
+:::demo
+
+```vue
+
+ click me show full screen loading!
+
+ click me show loading in target!
+
+ click me close loading in target!
+
+
loading will show here3
+
+
+
+```
+:::
+
+### parameter
+The parameter of dLoading
+
+| **parameter** | **type** | **default** | **description** | **jump Demo** |
+| ------------------ | ------------------------------------------------------------ | ------------------------- | ------------------------------------------------------------ | ---------------------------- |
+| v-dLoading | `Promise \| Array> \| Boolean \| undefined` | -- | Optional, command mode, control loading status | [Basic-usage](#Basic-usage) |
+| target | `element` | document.body | Optional, service mode, DOM nodes that need to be covered by Loading | [Service-method-call](#Service-method-call) |
+| message | `string` | -- | Optional, prompt message during loading | [many-promise](#many-promise) |
+| loadingTemplateRef | `VNode` | -- | Optional, custom loading template | [Custom-css-style](#Custom-css-style) |
+| backdrop | `boolean` | true | Optional, whether to show the mask during loading | [Basic-usage](#Basic-usage) |
+| positionType | `string` | relative | Optional, specify the positioning type of the `dLoading` host element, the value is consistent with the css position attribute。 | [Basic-usage](#Basic-usage) |
+| view | `{top?:string,left?:string} ` | {top: '50%', left: '50%'} | Optional, adjust the display position of loading, relative to the top and left distances of the host element | [Basic-usage](#Basic-usage) |
+| zIndex | `number` | -- | Optional, z-index value of loading prompt | [Basic-usage](#Basic-usage) |
+
diff --git a/docs/en-US/components/overlay/index.md b/docs/en-US/components/overlay/index.md
new file mode 100644
index 00000000..6a7399ba
--- /dev/null
+++ b/docs/en-US/components/overlay/index.md
@@ -0,0 +1,198 @@
+## overlay
+The mask layer is a basic component and is used to build components independent of the current page layout。
+### When to use
+You can use this component when you need a global pop-up window, or when you need an element-following function。
+### Fixed overlay
+
+:::demo Use `sm`, `''`, `lg` to define the basic type of `Search`
+
+```vue
+
+ {{title}}
+
+
+
+
+
+```
+
+:::
+
+
+
+
+### API
+The parameter of d-fixed-overlay
+
+| parameter | type | default | description |
+| :--------------: | :------------------------: | :---: | :-------------------------------------------------------------------- |
+| visible | `boolean` | false | Optional, whether the mask layer is visible |
+| onUpdate:visible | `(value: boolean) => void` | -- | Optional, the mask layer cancels the visible event |
+| backgroundBlock | `boolean` | false | Optional, if true, the background cannot be scrolled |
+| backgroundClass | `string` | -- | Optional, the style class of the background |
+| hasBackdrop | `boolean` | true | Optional, if false, the content behind the background will be triggered |
+| backdropClick | `() => void` | -- | Optional, click on the event triggered by the background |
+| backdropClose | `boolean` | false | Optional, if true, clicking on the background will trigger `onUpdate:visible`, the default parameter is false |
+| overlayStyle | `CSSProperties` | -- | Optional, the style of the mask layer |
+
+The parameter of d-flexible-overlay
+
+| 参数 | 类型 | 默认 | 说明 |
+| :--------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---: | :---------------------------------------------------------------- |
+| visible | `boolean` | false | 可选，遮罩层是否可见 |
+| onUpdate:visible | `(value: boolean) => void` | -- | 可选，遮罩层取消可见事件 |
+| backgroundBlock | `boolean` | false | 可选，如果为 true，背景不能滚动 |
+| backgroundClass | `string` | -- | 可选，背景的样式类 |
+| hasBackdrop | `boolean` | true | 可选，如果为false，背景后下的内容将可以触发 |
+| backdropClick | `() => void` | -- | 可选，点击背景触发的事件 |
+| backdropClose | `boolean` | false | 可选，如果为true，点击背景将触发 `onUpdate:visible`，参数是 false |
+| origin | `Element \| ComponentPublicInstance \| { x: number, y: number, width?: number, height?: number }` | false | 必选，你必须指定起点元素才能让遮罩层与该元素连接在一起 |
+| position | `{originX: HorizontalPos, originY: VerticalPos, overlayX: HorizontalPos, overlayY: VerticalPos } (type HorizontalPos = 'left' \| 'center' \| 'right') ( type VerticalPos = 'top' \| 'center' \| 'bottom')` | false | 可选，指定遮罩层与原点的连接点 |
diff --git a/docs/en-US/components/pagination/index.md b/docs/en-US/components/pagination/index.md
new file mode 100644
index 00000000..6e85d151
--- /dev/null
+++ b/docs/en-US/components/pagination/index.md
@@ -0,0 +1,473 @@
+# Pagination
+
+Pagination。
+
+### When to use
+
+When loading/rendering all the data will take a lot of time, you can switch the page number to browse the data。
+
+
+### Basic usage
+
+:::demo
+
+```vue
+
+
size = 'sm'
+
+
+
size = 'md'
+
+
+
size = 'lg'
+
+
+
Custom Style
+
+
+
+```
+:::
+
+
+### Minimalist mode
+Minimalist mode is suitable for some pages with a lot of information, which can simplify the complexity of the page。
+:::demo
+
+
+```vue
+
+
Simple Mode
+
+
+
Super Simple Mode
+
+
+
haveConfigMenu = "true"
+
+
+
show field
+
setting
+
+
+
display method
+
+
+
+
+
+
+
+
+
+
+```
+:::
+
+### Multiple configurations
+Support setting input jump, display jump button; setting pageSize and other functions。
+:::demo
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+```
+:::
+
+### Special cases
+The display of the pager in a special scene。
+:::demo
+
+
+```vue
+
+
+ When the value of pageIndex exceeds the maximum page number, enable showTruePageIndex to display the value of pageIndex
+
+
+
+
+ When the value of pageIndex exceeds the maximum page number, the showTruePageIndex function is disabled and only the maximum page number is displayed.
+
+
+
+
Default Mode
+
+
+ total = 0
+ total = 5
+ total = 15
+
+
+
Simple Mode
+
+
+ total = 0
+ total = 20
+ total = 30000
+ total = 100000
+ index = 2
+ index = 3
+
+
+
+```
+:::
+
+### 参数
+
+d-pagination 参数
+
+| parameter | type | default | description | jump Demo |
+| ----------------- | ------------------------------------------------------------ | -------------------------- | ------------------------------------------------------------ | --------------------- |
+| pageSize | `number` | 10 | Optional, display the maximum number of entries per page | [Basic-usage](#Basic-usage) |
+| total | `number` | 0 | Optional, total number of entries displayed | [Basic-usage](#Basic-usage) |
+| pageSizeOptions | `number[] ` | 10 | Optional, the data source of the drop-down box for the maximum number of entries per page for pagination, there are four options by default 5, 10, 20, 50 | [Multiple-configurations](#Multiple-configurations) |
+| pageSizeDirection | `Array<`[`AppendToBodyDirection`](#appendtobodydirection) `\|` [`ConnectedPosition`](#connectedposition)`>` | ['centerDown', 'centerUp'] | Optional, set the display direction of the drop-down box of each page entry | [Multiple-configurations](#Multiple-configurations) |
+| pageIndex | `number` | 1 | Optional, initialize page number | [Basic-usage](#Basic-usage) |
+| maxItems | `number` | 10 | Optional, display a few buttons at most for pagination | [Basic-usage](#Basic-usage) |
+| preLink | `string` | -- | Optional, the previous page button displays the icon, the default setting is the left arrow icon | [Basic-usage](#Basic-usage) |
+| nextLink | `string` | -- | Optional, the next page button displays the icon, the default setting is the right arrow icon | [Basic-usage](#Basic-usage) |
+| size | `number` | '' | 可Selection, paging component size, there are three options lg,``,sm, respectively representing large, medium and small | [Basic-usage](#Basic-usage) |
+| canJumpPage | `boolean` | false | Optional, whether to display the page input jump | [Basic-usage](#Basic-usage) |
+| canChangePageSize | `boolean` | false |Optional, whether to display the drop-down box for selecting the maximum number of entries per page for changing the pagination | [Basic-usage](#Basic-usage) |
+| canViewTotal | `boolean` | false | Optional, whether to display total entries | [Basic-usage](#Basic-usage) |
+| totalItemText | `string` | 'All entries' | Optional, total entry text | [Minimalist-mode](#Minimalist-mode) |
+| goToText | `string` | 'jump to' | Optional, total entry text | [Basic-usage](#Basic-usage) |
+| showJumpButton | `boolean` | false | Optional, whether to show the jump button | [Multiple-configurations](#Multiple-configurations) |
+| showTruePageIndex | `boolean` | false | Optional, the switch to display the current page number when the page number exceeds the paging range | [Multiple-configurations](#Multiple-configurations) |
+| lite | `boolean` | false | Optional, whether to switch to Minimalist-mode | [Minimalist-mode](#Minimalist-mode) |
+| showPageSelector | `boolean` | true | Optional, whether to show page number drop-down under `Minimalist-mode` | [Minimalist-mode](#Minimalist-mode) |
+| haveConfigMenu | `boolean` | false | Optional, whether to display the configuration under `Minimalist-mode` | [Minimalist-mode](#Minimalist-mode) |
+| autoFixPageIndex | `boolean` | true | Optional, whether to automatically correct the page number when changing the pageSize. If the `pageIndex` is handled in the `pageSizeChange` event, it is recommended to set it to `false` | [Minimalist-mode](#Minimalist-mode) |
+| autoHide | `boolean` | false | Optional, whether to hide automatically, autoHide is true and the minimum value of pageSizeOptions> total does not show pagination | [Minimalist-mode](#Minimalist-mode) |
+
+d-pagination Event
+
+| parameter | type | default | jump Demo |
+| --------------- | -------------------- | ---------------------------------------------------------- | --------------------- |
+| pageIndexChange | `EventEmitter` | Optional, callback of page number change, return current page number value | [Multiple-configurations](#Multiple-configurations) |
+| pageSizeChange | `EventEmitter` | Optional, callback when the maximum number of items per page is changed, return the current number of items displayed on each page | [Multiple-configurations](#Multiple-configurations) |
+
+**Tnterface & TypeDefine**
+
+##### AppendToBodyDirection
+
+```ts
+export type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp';
+```
+
+##### ConnectedPosition
+
+```ts
+export interface ConnectedPosition {
+ originX: 'start' | 'center' | 'end';
+ originY: 'top' | 'center' | 'bottom';
+
+ overlayX: 'start' | 'center' | 'end';
+ overlayY: 'top' | 'center' | 'bottom';
+
+ weight?: number;
+ offsetX?: number;
+ offsetY?: number;
+ panelClass?: string | string[];
+}
+```
+
diff --git a/docs/en-US/components/panel/index.md b/docs/en-US/components/panel/index.md
new file mode 100644
index 00000000..da8c4438
--- /dev/null
+++ b/docs/en-US/components/panel/index.md
@@ -0,0 +1,74 @@
+# Panel
+
+Content panel for content grouping。
+
+### When to use
+
+Used when the page content needs to be displayed in groups, generally including three parts: header, content area, and bottom。
+
+### Basic usage
+
+
+
+
+ Panel with foldable
+
+
+ This is body
+
+
+
+
+ Panel has no left padding
+
+
+ This is body
+
+
+
+ Panel with header and footer
+ This is body
+ This is footer
+
+
+
+
+```html
+
+
+
+ Panel with foldable
+
+
+ This is body
+
+
+
+
+ Panel has no left padding
+
+
+ This is body
+
+
+
+ Panel with header and footer
+ This is body
+ This is footer
+
+
+```
+
+
diff --git a/docs/en-US/components/popover/index.md b/docs/en-US/components/popover/index.md
new file mode 100644
index 00000000..522495c9
--- /dev/null
+++ b/docs/en-US/components/popover/index.md
@@ -0,0 +1,386 @@
+# Popover
+Simple text prompt bubble box。
+
+### When to use
+Used to notify users of non-critical issues or to prompt a control in a special situation。
+
+### Basic usage
+When Popover pops up, it will be positioned based on the content of the `reference` slot。
+
+
+```
+
+### Delay trigger
+Only when the trigger is hover, the mouse moves in for more than [mouseEnterDelay] milliseconds to trigger to prevent flashing caused by the user inadvertently swiping. The default value is 150 milliseconds; after the mouse is moved out, it will be triggered after [mouseLeaveDelay] milliseconds. , The Popover component will be hidden, the default value is 100 milliseconds。
+
+
+
+
+
Mouse enter 500ms later.
+ show Me
+
+
+ MouseEnter delay 500ms
+
+
+
+
+
Mouse leave 2000ms later.
+
+
+ MouseLeave delay 2000ms
+
+
+
+
+```html
+
+
+
bottom-right
+
+
+ bottom-right
+
+
+
+
+
bottom-right
+
+
+ bottom-right
+
+
+```
+
+### dPopover parameter
+
+| parameter | type | default | description | jump Demo |
+| ---- | ---- | ---- | ---- | ---- |
+| content | `string` | defalut |Optional, the display content of the pop-up box | [Custom-content](#Custom-content) |
+| visible | `boolean` | false | Optional, the initial pop-up state of the bullet box | [Basic-usage](#Basic-usage) |
+| trigger | `string` | click | Optional, trigger mode of the bullet frame | [Basic-usage](#Basic-usage) |
+| popType | `string` | default | Optional, pop-up box type, different styles | [Basic-usage](#Basic-usage) |
+| zIndex | `number` | 1060 | Optional, z-index value is used to manually control the layer height | [Basic-usage](#Basic-usage) |
+| positionType | `string` | bottom | Optionally, control the direction in which the bullet frame appears | [Pop-up-position](#Pop-up-position) |
+| showAnimation | `boolean` | true | Optional, whether to show animation | [Basic-usage](#Basic-usage) |
+| mouseEnterDelay | `number` | 150 | Optional, only when the trigger is hover, set the delay after the mouse moves in to display Popover, the unit is `ms`| [Delay-trigger](#Delay-trigger) |
+| mouseLeaveDelay | `number` | 100 | Optional, only need to set the delay after the mouse is moved out to hide the popover only when the trigger is hover, the unit is `ms` | [Delay-trigger](#Delay-trigger) |
+
diff --git a/docs/en-US/components/progress/index.md b/docs/en-US/components/progress/index.md
new file mode 100644
index 00000000..402090d5
--- /dev/null
+++ b/docs/en-US/components/progress/index.md
@@ -0,0 +1,142 @@
+# Progress
+
+progress bar。
+
+### When to use
+1. When the operation takes a long time, show the user the progress of the operation。
+2. When the operation needs to interrupt the existing interface or background operation, it takes a long time。
+3. When it is necessary to display the percentage of an operation completed or the completed steps/total steps。
+
+### Basic usage
+Basic progress and text configuration。
+
+
+
+
+
+
+
+
+
+
+
+```html
+
+
+
+
+
+
+```
+
+```css
+.progress-container {
+ margin-bottom: 20px;
+}
+```
+
+### Ring usage
+Basic progress and text configuration。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.progress-container-circle {
+ height: 130px;
+ width: 130px;
+ font-size: 20px;
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.icon-position {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ line-height: 1;
+ white-space: normal;
+ text-align: center;
+ transform: translate(-50%, -50%);
+ color: #50d4ab;
+ font-size: 24px;
+}
+```
+
+### API
+#### d-progress parameter
+| parameter | type | default | description | jump Demo |
+| :---: | :---: | :---: | :---: | :---: |
+| percentage | `number` | 0 | Optional, the maximum value of the progress bar is 100 | [基本用法](#基本用法) |
+| percentageText | `string` | -- | Optional, the text description of the current value of the progress bar, such as: '30%' \| '4/5' | [基本用法](#基本用法) |
+| barBgColor | `string` | #5170ff | Optional, the color of the progress bar is displayed, the default is sky blue | [基本用法](#基本用法) |
+| height | `string` | 20px | Optional, the height of the progress bar, the default value is 20px | [基本用法](#基本用法) |
+| isCircle | `boolean` | false | Optional, show whether the progress bar is a circle | [圆环用法](#圆环用法) |
+| strokeWidth | `number` | 6 | Optional, set the width of the circular progress bar, the unit is the percentage of the width of the progress bar and the canvas | [圆环用法](#圆环用法) |
+| showContent | `boolean` | true | Optional, set whether to display content in the circle-shaped progress bar | [圆环用法](#圆环用法) |
+
+
+
diff --git a/docs/en-US/components/quadrant-diagram/index.md b/docs/en-US/components/quadrant-diagram/index.md
new file mode 100644
index 00000000..e212464c
--- /dev/null
+++ b/docs/en-US/components/quadrant-diagram/index.md
@@ -0,0 +1,44 @@
+# ProQuadrantDiagramgress
+
+Quadrant diagram。
+
+### When to use
+
+Regional division and value sorting of affairs according to needs, which can be used to manage the priority of affairs。
+
+### Basic usage
+
+
+
+
+```
+
+:::
+
+### API
+
+d-rate parameter
+
+| parameter | type | default | description | jump Demo |
+| :-------: | :-----------------------------: | :----: | :------------------------------------------------------- | ----------------------------------- |
+| read | `boolean` | false | Optional, set whether to read-only mode, read-only mode cannot be interactive | [只读模式](#只读模式) |
+| count | `number` | 5 | Optional, set the total number of levels | [只读模式](#只读模式) |
+| type | `'success'\|'warning'\|'error'` | -- | Optional, set the current rating type, different types correspond to different colors | [使用 type 参数](#使用-type-参数) |
+| color | `string` | -- | Optional, star color | [动态模式-自定义](#动态模式-自定义) |
+| icon | `string` | -- | Optional, the style of the rating icon, only supports all icons in the devUI icon library | [动态模式](#动态模式) |
+| character | `string` | -- | Optional, the style of the rating icon, only one of icon and character can be set | [动态模式-自定义](#动态模式-自定义) |
diff --git a/docs/en-US/components/search/index.md b/docs/en-US/components/search/index.md
new file mode 100644
index 00000000..a47a8355
--- /dev/null
+++ b/docs/en-US/components/search/index.md
@@ -0,0 +1,95 @@
+# Search 搜索框
+
+### 基本用法
+
+:::demo 使用`sm`，`''`，`lg`来定义`Search`基本类型
+
+```vue
+
+
+
+
+
+
+```
+:::
+
+
+### API
+
+| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 |
+| :---------: | :------: | :-------: | :----------------------- | --------------------------------- | --------- |
+| zIndex | `number` | -- | 可选，指定包裹层的 z-index，用于浮动的时候控制 z 轴的叠放 | [基本用法](#基本用法) ||
+| container | `Element` | 父容器 | 可选，触发的容器，可不同于父容器 | [指定容器](#指定容器) ||
+| view | `{top?:number,bottom?:number}` | {top:0,bottom:0} | 可选，用于可视区域的调整，比如顶部有固定位置的头部等，数值对应被遮挡的顶部或底部的高度 | [基本用法](#基本用法) ||
+| scrollTarget | `Element` | document.documentElement | 可选，设置要发生滚动的容器，一般为滚动条所在容器，为主页面的滚动条时候可以不设置 | [指定滚动容器](#指定滚动容器) ||
+
+
+### d-sticky 事件
+
+| 事件 | 类型 | 说明 | 跳转 Demo |
+| :---------: | :------: | :--------------------: | :---------: |
+| statusChange | `string` | 可选，状态变化的时候触发，值为变化后的状态值 | [基本用法](#基本用法) |
+
diff --git a/docs/en-US/components/switch/index.md b/docs/en-US/components/switch/index.md
new file mode 100644
index 00000000..5845385f
--- /dev/null
+++ b/docs/en-US/components/switch/index.md
@@ -0,0 +1,66 @@
+# Switch 开关
+
+开/关切换组件。
+
+### 何时使用
+
+当两种状态需要来回切换控制时，比如启用/禁用。
+
+### 基本用法
+
+
+
+#### Small
+
+
+
+
+
+
+
+
+#### Middle
+
+
+
+
+
+
+
+
+
+
+
+
+#### Large
+
+
+
+
+
+```html
+
+
+
+
+```
+
+
diff --git a/docs/en-US/components/tabs/index.md b/docs/en-US/components/tabs/index.md
new file mode 100644
index 00000000..1fe14767
--- /dev/null
+++ b/docs/en-US/components/tabs/index.md
@@ -0,0 +1,7 @@
+# Tabs 选项卡切换
+
+选项卡切换组件。
+
+### 何时使用
+
+用户需要通过平级的区域将大块内容进行收纳和展现，保持界面整洁。
diff --git a/docs/en-US/components/tag-input/index.md b/docs/en-US/components/tag-input/index.md
new file mode 100644
index 00000000..80bd047c
--- /dev/null
+++ b/docs/en-US/components/tag-input/index.md
@@ -0,0 +1,44 @@
+# TagInput 标签输入框
+
+输入标签组件。
+
+### 何时使用
+
+当用户需要输入多个标签时。
+
+### 基本用法
+
+
+
+```html
+
+```
+
+
\ No newline at end of file
diff --git a/docs/en-US/components/toast/index.md b/docs/en-US/components/toast/index.md
new file mode 100644
index 00000000..2218666a
--- /dev/null
+++ b/docs/en-US/components/toast/index.md
@@ -0,0 +1,611 @@
+# Toast 全局通知
+
+全局信息提示组件。
+
+### 何时使用
+
+当需要向用户全局展示提示信息时使用，显示数秒后消失。
+
+### 基本用法
+
+common 时不展示图标。
+
+
+
+
+ Back to {{ msg.myInfo }} Home Page
+
+
+ Success
+ Warn
+ Error
+ Multiple
+ link
+ pure text
+ common
+ no title
+
+
+```html
+
+
+
+ Back to {{ msg.myInfo }} Home Page
+
+
+ Success
+ Warn
+ Error
+ Multiple
+ link
+ pure text
+ common
+ no title
+
+```
+
+```ts
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+ setup() {
+ const msgs = ref([])
+
+ function showToast(type: any) {
+ switch (type) {
+ case 'link':
+ msgs.value = [
+ { severity: 'info', summary: 'Relative', detail: `Back to Home Page` },
+ { severity: 'info', summary: 'Absolute', content: 'slot:customTemplate', myInfo: 'Devui' }
+ ]
+ break
+ case 'multiple':
+ msgs.value = [
+ {
+ severity: 'info',
+ summary: 'Summary',
+ content: 'This is a test text. This is a test text. This is a test text.'
+ },
+ {
+ severity: 'info',
+ summary: 'Summary',
+ content: 'This is a test text. This is a test text. This is a test text.'
+ }
+ ]
+ break
+ case 'noTitle':
+ msgs.value = [{ severity: 'warn', content: 'This is a test text. This is a test text. This is a test text.' }]
+ break
+ case 'plainText':
+ msgs.value = [{ severity: 'info', content: 'data：' }]
+ break
+ default:
+ msgs.value = [
+ {
+ severity: type,
+ summary: 'Summary',
+ content: 'This is a test text. This is a test text. This is a test text.'
+ }
+ ]
+ }
+ }
+
+ return {
+ msgs,
+ showToast
+ }
+ }
+})
+```
+
+### 超时时间
+
+当设置超时时间、没有标题时，则不展示标题和关闭按钮。
+
+
+
+ Success
+ Warn
+ Error
+ common
+
+
+```html
+
+
+ Success
+ Warn
+ Error
+ common
+
+```
+
+```ts
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+ setup() {
+ const msgs = ref([])
+
+ function showToast(type: any) {
+ switch (type) {
+ case 'error':
+ msgs.value = [{ severity: type, content: 'This is a test text. This is a test text. This is a test text.' }]
+ break
+ case 'common':
+ msgs.value = [{ severity: type, content: 'This is a test text. This is a test text. This is a test text.' }]
+ break
+ default:
+ msgs.value = [
+ {
+ severity: type,
+ summary: 'Summary',
+ content: 'This is a test text. This is a test text. This is a test text.'
+ }
+ ]
+ }
+ }
+
+ return {
+ msgs,
+ showToast
+ }
+ }
+})
+```
+
+### 自定义样式
+
+
+
+
+
+ Custom Style
+
+
+```html
+
+
+ Custom Style
+
+```
+
+```scss
+.custom-class {
+ .devui-toast-item-container {
+ color: #252b3a;
+ background-color: #ffffff;
+
+ .devui-toast-icon-close {
+ top: 10px;
+ right: 13px;
+
+ & i.icon {
+ color: #252b3a !important;
+ }
+ }
+
+ .devui-toast-image {
+ top: 15px;
+ }
+
+ .devui-toast-message {
+ line-height: 23px;
+
+ .devui-toast-title {
+ font-size: 16px;
+ }
+
+ p {
+ font-size: 14px;
+ }
+ }
+ }
+}
+```
+
+```ts
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+ setup() {
+ const msgs = ref([])
+
+ function showToast() {
+ msgs.value = [
+ {
+ severity: 'success',
+ summary: 'Success',
+ content: 'This is a test text. This is a test text. This is a test text.'
+ }
+ ]
+ }
+
+ return {
+ msgs,
+ showToast
+ }
+ }
+})
+```
+
+### 每个消息使用单独的超时时间
+
+当设置超时时间模式为 single 时，每个消息使用自身的 life 作为超时时间，如果未设置则按 severity 判断，severity 也未设置时默认超时时间为 5000 毫秒。
+
+
+
+ Single
+
+
+```html
+
+
+ Single
+
+```
+
+```ts
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+ setup() {
+ const msgs = ref([])
+
+ function showToast() {
+ msgs.value = [
+ { life: 3000, summary: 'Summary', content: 'This is a test text. This is a test text. This is a test text.' },
+ {
+ life: 6000,
+ severity: 'info',
+ summary: 'Summary',
+ content: 'This is a test text. This is a test text. This is a test text.'
+ },
+ {
+ severity: 'success',
+ summary: 'Success',
+ content: 'This is a test text. This is a test text. This is a test text.'
+ },
+ { severity: 'warn', summary: 'Warn', content: 'This is a test text. This is a test text. This is a test text.' }
+ ]
+ }
+
+ return {
+ msgs,
+ showToast
+ }
+ }
+})
+```
+
+### 服务方式调用
+
+使用服务的方式创建 toast 全局通知。
+
+click me show simplest toast!
+click me show customer toast!
+click me close customer toast!
+only close first customer toast!
+
+```html
+click me show simplest toast!
+click me show customer toast!
+click me close customer toast!
+only close first customer toast!
+```
+
+```ts
+import { defineComponent, ref } from 'vue'
+import { ToastService } from 'devui/toast'
+
+export default defineComponent({
+ setup() {
+ const results = ref()
+
+ function openToast2() {
+ results.value = ToastService.open({
+ value: [
+ { severity: 'info', summary: 'summary', content: '1. I am content' },
+ { severity: 'error', summary: 'summary', content: '2. I am content' },
+ { severity: 'error', summary: 'summary', content: '3. I am content' }
+ ],
+ sticky: true,
+ style: { width: '600px', color: 'red' },
+ styleClass: 'myCustom-toast',
+ life: 5000,
+ lifeMode: 'global',
+ /*
+ 接收发射过来的数据
+ */
+ onCloseEvent(value: any) {
+ console.log('closeEvent', value)
+ },
+ onValueChange(value: any) {
+ console.log('valueChange', value)
+ }
+ })
+
+ console.log('results', results.value)
+
+ isShow.value = true
+ }
+
+ function closeToast2() {
+ results.value.toastInstance.close()
+ isShow.value = false
+ }
+
+ function closeToast3() {
+ /*
+ 1.可以根据指定下标关闭 results.value.toastInstance.close(0);
+ 2.可以根据value对象去关闭，作用跟1是等同的，如下所示：
+ */
+ results.value.toastInstance.close({ severity: 'info', summary: 'summary', content: '1. I am content' })
+ }
+
+ return {
+ isShow,
+ openToast,
+ openToast2,
+ closeToast2,
+ closeToast3
+ }
+ }
+})
+```
+
+### Toast Api
+
+
+
+### Toast Event
+
+
+
+### 接口 & 类型定义
+
+Message
+
+```ts
+export interface Message {
+ severity?: string // 预设值有 common、success、error、warn、info，超时时间参见 life 说明，未设置或非预设值时超时时间为 5000 毫秒，warn 和 error 为 10000 毫秒
+ summary?: string // 消息标题。当设置超时时间，未设置标题时，不展示标题和关闭按钮
+ detail?: string // 消息内容，推荐使用content替换
+ content?: string | `slot:${string}` | (message: Message) => ReturnType // 消息内容，支持纯文本和插槽，推荐使用
+ life?: number // 单个消息超时时间，需设置 lifeMode 为 single 。每个消息使用自己的超时时间，开启该模式却未设置时按 severity 判断超时时间
+ id?: any // 消息ID
+}
+```
+
+### Service 引入方式
+
+```ts
+import { ToastService } from 'devui'
+```
+
+### Service 使用
+
+```ts
+// 方式 1，局部引入 ToastService
+ToastService.open({ xxx })
+
+// 方式2，全局属性
+app.config.globalProperties.$toastService.open({ xxx })
+```
+
+### Service Api
+
+
+
+
+
+
diff --git a/docs/en-US/components/tooltip/index.md b/docs/en-US/components/tooltip/index.md
new file mode 100644
index 00000000..3faa69f2
--- /dev/null
+++ b/docs/en-US/components/tooltip/index.md
@@ -0,0 +1,100 @@
+# Tooltip
+
+Text prompt component。
+
+### When to use
+
+The user moves the mouse to the text, and it is used when further prompts are needed。
+
+### Basic usage
+
+:::demo We can control the display position of the tooltip by controlling the attribute `position`. There are 4 values for `position`, which are `top`, `right`, `bottom`, and `left`. Control the content of the tooltip prompt box through the attribute `content`。
+
+
+
+
+
+
+
+
+
+```vue
+
+
+
上面
+
+
+
下面
+
+
+
左面
+
+
+
右面
+
+
+```
+
+```css
+.example {
+ height: 50px;
+ width: 60px;
+ background: cornflowerblue;
+ margin-top: 30px;
+}
+```
+:::
+
+### Delay trigger
+
+The mouse will be triggered after moving in for more than [mouseEnterDelay] milliseconds to prevent flashing caused by the user accidentally swiping. The default value is 150 milliseconds; after the mouse is moved out, the toolTip component will be hidden after [mouseLeaveDelay] milliseconds. The default value Is 100 milliseconds。
+
+:::demo Use the `mouseEnterDelay` property to control the `delay display` of the tooltip prompt box (the default is 100ms), and the `mouseLeaveDelay` property to control the `delay disappearing` of the tooltip prompt box (the default is 150ms)
+