Skip to content

Commit 92cbfc1

Browse files
James-9696James-9696
authored
fix(message): [message] add the message component to the menu (#3986)
1 parent ec839f1 commit 92cbfc1

17 files changed

+442
-22
lines changed

‎examples/sites/demos/apis/message.js‎

Lines changed: 48 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,95 @@
11
export default {
2-
mode: ['mobile-first'],
2+
mode: ['mobile-first', 'pc'],
33
apis: [
44
{
55
name: 'message',
66
type: 'component',
77
props: [
88
{
99
name: 'duration',
10-
type: 'String',
11-
defaultValue: '',
10+
type: 'string',
11+
defaultValue: '3000',
1212
desc: {
1313
'zh-CN': '设置提示信息停留时间',
14-
'en-US': ''
14+
'en-US': 'Set the prompt information retention time'
1515
},
16-
mode: ['mobile-first'],
17-
mfDemo: ''
16+
mode: ['mobile-first', 'pc'],
17+
mfDemo: '',
18+
pcDemo: 'message-duration'
1819
},
1920
{
2021
name: 'id',
21-
type: 'String',
22+
type: 'string',
2223
defaultValue: '',
2324
desc: {
2425
'zh-CN': '设置唯一的 id 防止重复提示，只对 type=message 有效',
25-
'en-US': ''
26+
'en-US': 'Set a unique id to prevent duplicate prompts, only valid for type=message'
2627
},
27-
mode: ['mobile-first'],
28-
mfDemo: ''
28+
mode: ['mobile-first', 'pc'],
29+
mfDemo: '',
30+
pcDemo: 'prevent-duplicate'
2931
},
3032
{
3133
name: 'message',
32-
type: 'String',
34+
type: 'string',
3335
defaultValue: '',
3436
desc: {
3537
'zh-CN': '设置提示信息',
36-
'en-US': ''
38+
'en-US': 'Set the prompt information'
3739
},
38-
mode: ['mobile-first'],
39-
mfDemo: ''
40+
mode: ['mobile-first', 'pc'],
41+
mfDemo: '',
42+
pcDemo: 'basic-usage'
4043
},
4144
{
4245
name: 'show-close',
43-
type: 'String',
46+
type: 'string',
4447
defaultValue: '',
4548
desc: {
4649
'zh-CN': '控制弹窗是否显示关闭图标',
47-
'en-US': ''
50+
'en-US': 'Whether to display the close icon'
4851
},
4952
mode: ['mobile-first'],
5053
mfDemo: ''
5154
},
55+
{
56+
name: 'message-closable',
57+
type: 'boolean',
58+
defaultValue: 'false',
59+
desc: {
60+
'zh-CN': '是否显示关闭按钮，默认值为 false',
61+
'en-US': 'close button is displayed or not, the default value is false'
62+
},
63+
mode: ['pc'],
64+
mfDemo: '',
65+
pcDemo: 'message-close'
66+
},
5267
{
5368
name: 'status',
54-
type: 'String',
55-
defaultValue: '',
69+
typeAnchorName: 'IStatus',
70+
type: 'IStatus',
71+
defaultValue: "'info'",
5672
desc: {
57-
'zh-CN': '设置消息状态，可选值有 info | success | warning | error',
58-
'en-US': ''
73+
'zh-CN': '设置消息状态',
74+
'en-US': 'Set the message status'
5975
},
60-
mode: ['mobile-first'],
61-
mfDemo: ''
76+
mode: ['mobile-first', 'pc'],
77+
mfDemo: '',
78+
pcDemo: 'basic-usage'
6279
}
6380
],
6481
events: [],
6582
methods: [],
6683
slots: []
6784
}
85+
],
86+
types: [
87+
{
88+
name: 'IStatus',
89+
type: 'type',
90+
code: `
91+
type IStatus = 'info' | 'success' | 'warning' | 'error' | 'loading'
92+
`
93+
}
6894
]
6995
}

‎examples/sites/demos/pc/app/message/basic-usage-composition-api.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<div>
3+
<h2>消息状态：</h2>
4+
<div class="content">
5+
<tiny-button @click="infoClick()">信息提示图标</tiny-button>
6+
<tiny-button @click="successClick()">成功提示图标</tiny-button>
7+
<tiny-button @click="warningClick()">警告提示图标</tiny-button>
8+
<tiny-button @click="errorClick()">错误提示图标</tiny-button>
9+
<tiny-button @click="loadingClick()">加载提示图标</tiny-button>
10+
</div>
11+
</div>
12+
</template>
13+
14+
<script setup>
15+
import { Button as TinyButton, Message } from '@opentiny/vue'
16+
17+
function infoClick() {
18+
console.log(Message, 18)
19+
Message.message({ message: '基本提示图标', status: 'info' })
20+
}
21+
22+
function successClick() {
23+
Message.message({ message: '成功提示图标', status: 'success' })
24+
}
25+
26+
function warningClick() {
27+
Message.message({ message: '警告提示图标', status: 'warning' })
28+
}
29+
30+
function errorClick() {
31+
Message.message({ message: '错误提示图标', status: 'error' })
32+
}
33+
34+
function loadingClick() {
35+
Message.message({ message: '加载提示图标', status: 'loading' })
36+
}
37+
</script>
38+
39+
<style scoped>
40+
h2 {
41+
font-size: 16px;
42+
font-weight: bold;
43+
margin: 20px 0 12px;
44+
}
45+
.content {
46+
margin: 8px;
47+
}
48+
</style>

‎examples/sites/demos/pc/app/message/basic-usage.spec.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { test, expect } from '@playwright/test'
2+
3+
test('状态和图标', async ({ page }) => {
4+
page.on('pageerror', (exception) => expect(exception).toBeNull())
5+
await page.goto('message#basic-usage')
6+
const message = page.locator('.type__message.is__visible')
7+
8+
// ----消息状态示例----
9+
await page.getByRole('button', { name: '信息提示图标' }).click()
10+
await expect(message).toHaveClass(/status__info/)
11+
12+
// ----消息状态示例----
13+
await page.getByRole('button', { name: '成功提示图标' }).click()
14+
await expect(message.nth(1)).toHaveClass(/status__success/)
15+
16+
// ----消息状态示例----
17+
await page.getByRole('button', { name: '警告提示图标' }).click()
18+
await expect(message.nth(2)).toHaveClass(/status__warning/)
19+
20+
// ----消息状态示例----
21+
await page.getByRole('button', { name: '错误提示图标' }).click()
22+
await expect(message.nth(3)).toHaveClass(/status__error/)
23+
24+
// ----消息状态示例----
25+
await page.getByRole('button', { name: '加载提示图标' }).click()
26+
await expect(message.nth(4)).toHaveClass(/status__loading/)
27+
})

‎examples/sites/demos/pc/app/message/basic-usage.vue‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<div>
3+
<h2>消息状态：</h2>
4+
<div class="content">
5+
<tiny-button @click="infoClick()">信息提示图标</tiny-button>
6+
<tiny-button @click="successClick()">成功提示图标</tiny-button>
7+
<tiny-button @click="warningClick()">警告提示图标</tiny-button>
8+
<tiny-button @click="errorClick()">错误提示图标</tiny-button>
9+
<tiny-button @click="loadingClick()">加载提示图标</tiny-button>
10+
</div>
11+
</div>
12+
</template>
13+
14+
<script>
15+
import { Button, Message } from '@opentiny/vue'
16+
17+
export default {
18+
components: {
19+
TinyButton: Button
20+
},
21+
methods: {
22+
infoClick() {
23+
Message.message({ message: '基本提示图标', status: 'info' })
24+
},
25+
successClick() {
26+
Message.message({ message: '成功提示图标', status: 'success' })
27+
},
28+
warningClick() {
29+
Message.message({ message: '警告提示图标', status: 'warning' })
30+
},
31+
errorClick() {
32+
Message.message({ message: '错误提示图标', status: 'error' })
33+
},
34+
loadingClick() {
35+
Message.message({ message: '加载提示图标', status: 'loading' })
36+
}
37+
}
38+
}
39+
</script>
40+
41+
<style scoped>
42+
h2 {
43+
font-size: 16px;
44+
font-weight: bold;
45+
margin: 20px 0 12px;
46+
}
47+
.content {
48+
margin: 8px;
49+
}
50+
</style>

‎examples/sites/demos/pc/app/message/message-close-composition-api.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div>
3+
<div class="content">
4+
<tiny-button @click="btnClick">显示关闭按钮</tiny-button>
5+
</div>
6+
</div>
7+
</template>
8+
9+
<script setup>
10+
import { Button as TinyButton, Message } from '@opentiny/vue'
11+
12+
function btnClick() {
13+
Message.message({
14+
status: 'info',
15+
message: '是否显示关闭按钮',
16+
messageClosable: true
17+
})
18+
}
19+
</script>
20+
21+
<style scoped>
22+
.content {
23+
margin: 8px;
24+
}
25+
</style>

‎examples/sites/demos/pc/app/message/message-close.spec.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { test, expect } from '@playwright/test'
2+
3+
test('消息的关闭和延时', async ({ page }) => {
4+
page.on('pageerror', (exception) => expect(exception).toBeNull())
5+
await page.goto('message#message-close')
6+
await page.getByRole('button', { name: '显示关闭按钮' }).click()
7+
const info = page.locator('div').filter({ hasText: /是否显示关闭按钮/ })
8+
await expect(info.nth(1)).toHaveText(/是否显示关闭按钮/)
9+
})

‎examples/sites/demos/pc/app/message/message-close.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<div>
3+
<div class="content">
4+
<tiny-button @click="btnClick">显示关闭按钮</tiny-button>
5+
</div>
6+
</div>
7+
</template>
8+
9+
<script>
10+
import { Button, Message } from '@opentiny/vue'
11+
12+
export default {
13+
components: {
14+
TinyButton: Button
15+
},
16+
methods: {
17+
btnClick() {
18+
Message.message({
19+
status: 'info',
20+
message: '是否显示关闭按钮',
21+
messageClosable: true
22+
})
23+
}
24+
}
25+
}
26+
</script>
27+
28+
<style scoped>
29+
.content {
30+
margin: 8px;
31+
}
32+
</style>

‎examples/sites/demos/pc/app/message/message-duration-composition-api.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div>
3+
<div class="content">
4+
<tiny-button @click="btnClick">消息时长</tiny-button>
5+
</div>
6+
</div>
7+
</template>
8+
9+
<script setup>
10+
import { Button as TinyButton, Message } from '@opentiny/vue'
11+
12+
function btnClick() {
13+
Message.message({
14+
status: 'info',
15+
message: '自定义消息的内容，5s 后得自动关闭',
16+
duration: 5000
17+
})
18+
}
19+
</script>
20+
21+
<style scoped>
22+
.content {
23+
margin: 8px;
24+
}
25+
</style>

‎examples/sites/demos/pc/app/message/message-duration.spec.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { test, expect } from '@playwright/test'
2+
3+
test('消息的关闭和延时', async ({ page }) => {
4+
page.on('pageerror', (exception) => expect(exception).toBeNull())
5+
await page.goto('message#message-duration')
6+
await page.getByRole('button', { name: '消息时长' }).click()
7+
const info = page.locator('div').filter({ hasText: /5s 后得自动关闭/ })
8+
await expect(info.nth(1)).toHaveText(/5s 后得自动关闭/)
9+
})

‎examples/sites/demos/pc/app/message/message-duration.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<div>
3+
<div class="content">
4+
<tiny-button @click="btnClick">消息时长</tiny-button>
5+
</div>
6+
</div>
7+
</template>
8+
9+
<script>
10+
import { Button, Message } from '@opentiny/vue'
11+
12+
export default {
13+
components: {
14+
TinyButton: Button
15+
},
16+
methods: {
17+
btnClick() {
18+
Message.message({
19+
status: 'info',
20+
message: '自定义消息的内容，5s 后得自动关闭',
21+
duration: 5000
22+
})
23+
}
24+
}
25+
}
26+
</script>
27+
28+
<style scoped>
29+
.content {
30+
margin: 8px;
31+
}
32+
</style>

0 commit comments

Comments
 (0)