benyuanzhang
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(site/notify): specification document (#1337)

This commit is contained in:
yoyo 2024-01-25 16:59:45 +08:00 committed by GitHub
parent 6160d9ebec
commit d39cbd0926
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 33 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/sites/demos/pc/app/notify/duration-composition-api.vue
View File

@ -13,7 +13,7 @@ function baseClick() {
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
message: '默认4500 ms后自动关闭提示框',
message: '默认 4500ms 后自动关闭提示框',
position: 'top-right'
})
}
@ -22,7 +22,7 @@ function successClick() {
Notify({
type: 'success',
title: (h, params) => <h4>通知消息的标题</h4>,
message: '500ms后自动关闭提示框',
message: '500ms 后自动关闭提示框',
position: 'top-right',
duration: 500
})
@ -32,7 +32,7 @@ function errorClick() {
Notify({
type: 'error',
title: (h, params) => <h4>通知消息的标题</h4>,
message: '5000ms后自动关闭提示框',
message: '5000ms 后自动关闭提示框',
position: 'top-right',
duration: 5000
})

6
examples/sites/demos/pc/app/notify/duration.vue
View File

@ -18,7 +18,7 @@ export default {
Notify({
type: 'info',
title: (h, params) => <h4>通知消息的标题</h4>,
message: '默认4500 ms后自动关闭提示框',
message: '默认 4500ms 后自动关闭提示框',
position: 'top-right'
})
},
@ -26,7 +26,7 @@ export default {
Notify({
type: 'success',
title: (h, params) => <h4>通知消息的标题</h4>,
message: '500ms后自动关闭提示框',
message: '500ms 后自动关闭提示框',
position: 'top-right',
duration: 500
})
@ -35,7 +35,7 @@ export default {
Notify({
type: 'error',
title: (h, params) => <h4>通知消息的标题</h4>,
message: '5000ms后自动关闭提示框',
message: '5000ms 后自动关闭提示框',
position: 'top-right',
duration: 5000
})

4
examples/sites/demos/pc/app/notify/notify-events-composition-api.vue
View File

@ -14,7 +14,7 @@ function baseClick() {
title: '通知',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
beforeClose: () => {
Modal.message({ message: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框' })
Modal.message({ message: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框', status: 'info' })
return false
},
duration: 500000,
@ -27,7 +27,7 @@ function baseClick2() {
type: 'info',
title: '通知',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
onClose: () => Modal.message({ message: '点击关闭按钮时触发事件' }),
onClose: () => Modal.message({ message: '点击关闭按钮时触发事件', status: 'info' }),
duration: 500000,
position: 'top-right'
})

4
examples/sites/demos/pc/app/notify/notify-events.vue
View File

@ -19,7 +19,7 @@ export default {
title: '通知',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
beforeClose: () => {
Modal.message({ message: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框' })
Modal.message({ message: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框', status: 'info' })
return false
},
duration: 500000,
@ -31,7 +31,7 @@ export default {
type: 'info',
title: '通知',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
onClose: () => Modal.message({ message: '点击关闭按钮时触发事件' }),
onClose: () => Modal.message({ message: '点击关闭按钮时触发事件', status: 'info' }),
duration: 500000,
position: 'top-right'
})

2
examples/sites/demos/pc/app/notify/position-composition-api.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="content">
<tiny-button @click="infoClick" :reset-time="0">默认bottom-right</tiny-button>
<tiny-button @click="infoClick" :reset-time="0">默认 bottom-right</tiny-button>
<tiny-button @click="successClick" :reset-time="0">top-right</tiny-button>
</div>
</template>

2
examples/sites/demos/pc/app/notify/position.spec.ts
View File

@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
test('显示位置', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('notify#position')
await page.getByRole('button', { name: '默认bottom-right' }).click()
await page.getByRole('button', { name: '默认 bottom-right' }).click()
await page.getByRole('button', { name: 'top-right' }).click()
const bottom = page.locator('.bottom-right')
const bottomBox = await bottom.boundingBox()

2
examples/sites/demos/pc/app/notify/position.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="content">
<tiny-button @click="infoClick" :reset-time="0">默认bottom-right</tiny-button>
<tiny-button @click="infoClick" :reset-time="0">默认 bottom-right</tiny-button>
<tiny-button @click="successClick" :reset-time="0">top-right</tiny-button>
</div>
</template>

8
examples/sites/demos/pc/app/notify/type-composition-api.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="content">
<tiny-button @click="infoClick" :reset-time="0">info类型</tiny-button>
<tiny-button @click="successClick" :reset-time="0">success类型</tiny-button>
<tiny-button @click="errorClick" :reset-time="0">error类型</tiny-button>
<tiny-button @click="warningClick" :reset-time="0">warning类型</tiny-button>
<tiny-button @click="infoClick" :reset-time="0">info 类型</tiny-button>
<tiny-button @click="successClick" :reset-time="0">success 类型</tiny-button>
<tiny-button @click="errorClick" :reset-time="0">error 类型</tiny-button>
<tiny-button @click="warningClick" :reset-time="0">warning 类型</tiny-button>
</div>
</template>

8
examples/sites/demos/pc/app/notify/type.spec.ts
View File

@ -3,19 +3,19 @@ import { test, expect } from '@playwright/test'
test('消息类型', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('notify#type')
await page.getByRole('button', { name: 'info类型' }).click()
await page.getByRole('button', { name: 'info 类型' }).click()
const info = page.locator('.tiny-notify--info')
await expect(info).toBeVisible()
await page.getByRole('button', { name: 'success类型' }).click()
await page.getByRole('button', { name: 'success 类型' }).click()
const success = page.locator('.tiny-notify--success')
await expect(success).toBeVisible()
await page.getByRole('button', { name: 'error类型' }).click()
await page.getByRole('button', { name: 'error 类型' }).click()
const error = page.locator('.tiny-notify--error')
await expect(error).toBeVisible()
await page.getByRole('button', { name: 'warning类型' }).click()
await page.getByRole('button', { name: 'warning 类型' }).click()
const warning = page.locator('.tiny-notify--warning')
await expect(warning).toBeVisible()
})

8
examples/sites/demos/pc/app/notify/type.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="content">
<tiny-button @click="infoClick" :reset-time="0">info类型</tiny-button>
<tiny-button @click="successClick" :reset-time="0">success类型</tiny-button>
<tiny-button @click="errorClick" :reset-time="0">error类型</tiny-button>
<tiny-button @click="warningClick" :reset-time="0">warning类型</tiny-button>
<tiny-button @click="infoClick" :reset-time="0">info 类型</tiny-button>
<tiny-button @click="successClick" :reset-time="0">success 类型</tiny-button>
<tiny-button @click="errorClick" :reset-time="0">error 类型</tiny-button>
<tiny-button @click="warningClick" :reset-time="0">warning 类型</tiny-button>
</div>
</template>

16
examples/sites/demos/pc/app/notify/webdoc/notify.js
View File

@ -5,7 +5,7 @@ export default {
{
'demoId': 'basic-usage',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': { 'zh-CN': '', 'en-US': '' },
'desc': { 'zh-CN': '通过函数调用的方式使用组件。', 'en-US': 'Components are used by means of function calls' },
'codeFiles': ['basic-usage.vue']
},
{
@ -61,9 +61,9 @@ export default {
'demoId': 'showClose',
'name': { 'zh-CN': '不显示关闭按钮', 'en-US': 'The close button is not displayed.' },
'desc': {
'zh-CN': '<p>showClose <code>message</code> 属性设置通知框是否显示关闭按钮，默认值：true 。</p>\n',
'zh-CN': '<p> <code>showClose</code> 属性设置通知框是否显示关闭按钮，默认值：<code>true</code> 。</p>\n',
'en-US':
'<p>showClose <code>message</code>: indicates whether the notification box displays the close button. The default value is true. </p>\n'
'<p>The showClose property sets whether the notification box displays the close button. The default value is true. </p>\n'
},
'codeFiles': ['showClose.vue']
},
@ -139,7 +139,7 @@ export default {
{
'name': 'type',
'type': `'info' | 'success' | 'warning' | 'error'`,
'defaultValue': 'info',
'defaultValue': `'info'`,
'desc': {
'zh-CN': '通知消息类型',
'en-US': 'Notification message type'
@ -159,8 +159,8 @@ export default {
},
{
'name': 'message',
'typeAnchorName': 'INotyfyMessage',
'type': 'INotyfyMessage',
'typeAnchorName': 'INotifyMessage',
'type': 'INotifyMessage',
'defaultValue': '',
'desc': {
'zh-CN': '通知消息文本，可用 jsx 定制',
@ -267,9 +267,9 @@ export default {
code: `type INotifyTitle = string | (h: Vue.h, params: { titleClass: string, vm }) => JSX.Element`
},
{
name: 'INotyfyMessage',
name: 'INotifyMessage',
type: 'type',
code: `type INotyfyMessage = string | (h: Vue.h, params: { messageClass: string, vm }) => JSX.Element`
code: `type INotifyMessage = string | (h: Vue.h, params: { messageClass: string, vm }) => JSX.Element`
}
]
}