Skip to content

Commit dc65b4a

Browse files
hxj9102kagol
hxj9102
authored and
kagol
committed
docs: 新增Message组件英文文档
1 parent d993fc5 commit dc65b4a

File tree

2 files changed

+275
-0
lines changed

2 files changed

+275
-0
lines changed

‎packages/devui-vue/docs/.vitepress/devui-theme/components/PageContributorConfig.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,10 @@ export const CONTRIBUTORS_MAP: IContributingMap = {
335335
avatar: 'https://avatars.githubusercontent.com/u/71202421?v=4',
336336
homepage: 'https://github.com/79E'
337337
},
338+
{
339+
avatar: 'https://avatars.githubusercontent.com/u/58357112?v=4',
340+
homepage: 'https://github.com/hxj9102'
341+
},
338342
],
339343
modal: [
340344
{

‎packages/devui-vue/docs/en-US/components/message/index.md‎

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
# Message
2+
3+
It is often used for feedback prompt after active operation. The difference with Notification is that the latter is more used for passive reminders of system level notifications.
4+
5+
### When To Use
6+
7+
It is used when needs to display the prompt information globally to the user, and will disappear after a few seconds.
8+
9+
### Basic Usage
10+
11+
There are 4 types of `Message`：normal、success、error、warning、info。
12+
13+
:::demo
14+
15+
```vue
16+
<template>
17+
<div class="demo-spacing">
18+
<d-button @click="open('normal')">normal</d-button>
19+
<d-button @click="open('success')">success</d-button>
20+
<d-button @click="open('error')">error</d-button>
21+
<d-button @click="open('warning')">warning</d-button>
22+
<d-button @click="open('info')">info</d-button>
23+
</div>
24+
</template>
25+
<script>
26+
import { defineComponent } from 'vue';
27+
28+
export default defineComponent({
29+
setup() {
30+
31+
function open (type) {
32+
this.$message({
33+
type,
34+
message: 'this is a message.'
35+
})
36+
}
37+
38+
return { open };
39+
}
40+
});
41+
</script>
42+
```
43+
:::
44+
45+
### Closable Prompt
46+
47+
The default Message cannot be closed manually. If you need to manually close, you can set `showClose` to `true`. In addition, the default duration time is 3000 milliseconds. Setting the value of this attribute (`duration`) to 0 means that the message will not be automatically closed.
48+
49+
:::demo
50+
51+
```vue
52+
<template>
53+
<div class="demo-spacing">
54+
<d-button @click="closeIcon()">show close icon</d-button>
55+
<d-button @click="notClose()">not close</d-button>
56+
</div>
57+
</template>
58+
<script>
59+
import { defineComponent } from 'vue';
60+
61+
export default defineComponent({
62+
setup() {
63+
64+
function closeIcon () {
65+
this.$message({
66+
type:'success',
67+
message:'Show close button.',
68+
showClose: true,
69+
});
70+
}
71+
72+
function notClose () {
73+
this.$message({
74+
type:'info',
75+
message:'Do not automatically close messages.',
76+
showClose: true,
77+
duration: 0
78+
});
79+
}
80+
81+
return { closeIcon, notClose };
82+
}
83+
});
84+
</script>
85+
```
86+
87+
:::
88+
89+
### Duration
90+
91+
By setting `duration` to specify the time displayed by `message` in milliseconds (1000ms => 1 second), setting this attribute to 0 will not automatically close.
92+
93+
:::demo
94+
95+
```vue
96+
<template>
97+
<div class="demo-spacing">
98+
<d-button @click="open()">show message 5000ms</d-button>
99+
</div>
100+
</template>
101+
<script>
102+
import { defineComponent } from 'vue';
103+
104+
export default defineComponent({
105+
setup() {
106+
107+
function open () {
108+
this.$message({
109+
type:'success',
110+
message:'show message 5000ms.',
111+
duration: 5000,
112+
showClose: true,
113+
});
114+
}
115+
116+
return { open };
117+
}
118+
});
119+
</script>
120+
```
121+
122+
123+
:::
124+
125+
### Shadow & Bordered Setting
126+
127+
Remove the border of `message` by setting `bordered` to `false`.
128+
129+
Remove the shadow of `message` by setting `shadow` to `false`.
130+
131+
:::demo
132+
133+
```vue
134+
<template>
135+
<div class="demo-spacing">
136+
<d-button @click="closeBordered()">close bordered</d-button>
137+
<d-button @click="closeShadow()">close shadow</d-button>
138+
<d-button @click="closeBAndS()">close bordered And shadow</d-button>
139+
</div>
140+
</template>
141+
<script>
142+
import { defineComponent } from 'vue';
143+
144+
export default defineComponent({
145+
setup() {
146+
147+
function closeBordered () {
148+
this.$message({
149+
type:'success',
150+
message:'close bordered.',
151+
bordered: false,
152+
});
153+
}
154+
155+
function closeShadow () {
156+
this.$message({
157+
type:'info',
158+
message:'close shadow.',
159+
shadow: false,
160+
});
161+
}
162+
163+
function closeBAndS () {
164+
this.$message({
165+
type:'error',
166+
message:'close shadow.',
167+
bordered: false,
168+
shadow: false,
169+
});
170+
}
171+
172+
return { closeBordered, closeShadow, closeBAndS };
173+
}
174+
});
175+
</script>
176+
```
177+
178+
:::
179+
180+
### Close Callback
181+
182+
Set the callback when closing through the onClose parameter.
183+
:::demo
184+
185+
```vue
186+
<template>
187+
<div class="demo-spacing">
188+
<d-button @click="closeMessage()">close message</d-button>
189+
</div>
190+
</template>
191+
<script>
192+
import { defineComponent } from 'vue';
193+
194+
export default defineComponent({
195+
setup() {
196+
197+
function closeMessage () {
198+
this.$message({
199+
type:'success',
200+
message:'close message.',
201+
onClose: () => {
202+
console.log('message closed');
203+
},
204+
});
205+
}
206+
207+
return { closeMessage };
208+
}
209+
});
210+
</script>
211+
```
212+
213+
:::
214+
215+
### Multiple Usages
216+
217+
When calling message, there can be multiple calling methods and multiple usage methods.
218+
219+
##### Calling Methods
220+
```javascript
221+
// First: global call
222+
this.$message('I call message globally');
223+
224+
// Second: import and local call
225+
import { message } from 'vue-devui'
226+
message('I call message locally')
227+
```
228+
229+
##### Usage Methods
230+
```javascript
231+
import { message } from 'vue-devui'
232+
233+
// Accepting strings for default parameter
234+
message('I am a default message');
235+
236+
// Accepting object for parameter
237+
message({
238+
message:'I am message',
239+
type: 'info',
240+
bordered: false,
241+
});
242+
243+
// Directly select type to call
244+
message.error('I am a error message');
245+
message.error({
246+
message:'I am a error message',
247+
bordered: false,
248+
shadow: false,
249+
});
250+
```
251+
252+
### API
253+
254+
| Parameter | Type | Default | Description | Jump to Demo |
255+
| :-------------------: | :--------------: | :---------------------: | :--------------------------------------------: | :-------------------: |
256+
| message | `string` | '' | Set message text | [Basic Usage](#basic-usage) |
257+
| type | `MessageType` | 'normal'| Set message content type | [Basic Usage](#basic-usage) |
258+
| showClose | `Boolean`| false | Set the display closing button | [Closable Prompt](#closable-prompt) |
259+
| duration | `number`| 3000 | Set duration | [Duration](#duration) |
260+
| shadow | `Boolean`| true | Set whether to display shadow | [Shadow & Bordered Setting](#shadow-bordered-setting) |
261+
| bordered | `Boolean`| true | Set whether to display border | [Shadow & Bordered Setting](#shadow-bordered-setting) |
262+
| on-close | `() => void` | - | Set the callback when the message is closed | [Close Callback](#close-callback) |
263+
264+
265+
### Message Type Definition
266+
267+
#### MessageType
268+
269+
```ts
270+
type MessageType = 'normal' | 'success' | 'error' | 'warning' | 'info';
271+
```

0 commit comments

Comments
 (0)