opentiny
/
tiny-vue
0
0
Fork 31
Code Issues Pull Requests 8 Packages Projects Releases Wiki Activity

docs(drawer): [drawer] Optimize document and e2e test (#888)

This commit is contained in:
ajaxzheng 2023-11-22 17:08:34 -08:00 committed by GitHub
parent 41b2b7d9ff
commit e3cff642e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 151 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue
View File

@ -2,7 +2,11 @@
<div>
<tiny-button @click="fn" type="primary"> 抽屉组件 </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
<div>内容区域</div>
<div>
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>

2
examples/sites/demos/pc/app/drawer/basic-usage.spec.ts
View File

@ -10,5 +10,5 @@ test('基本用法', async ({ page }) => {
await expect(drawer.locator('.tiny-drawer__header')).toHaveText('标题')
await expect(drawer.locator('.tiny-drawer__body')).toHaveText('内容区域')
await drawer.getByRole('button', { name: 'Close' }).click()
await expect(drawer).not.toBeVisible()
await expect(page.locator('.tiny-drawer__main')).not.toBeVisible()
})

6
examples/sites/demos/pc/app/drawer/basic-usage.vue
View File

@ -2,7 +2,11 @@
<div>
<tiny-button @click="fn" type="primary"> 抽屉组件 </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
<div>内容区域</div>
<div>
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>

6
examples/sites/demos/pc/app/drawer/close-event-composition-api.vue
View File

@ -2,7 +2,11 @@
<div>
<tiny-button @click="fn" type="primary"> 关闭事件示例 </tiny-button>
<tiny-drawer title="标题" :show-footer="true" :visible="visible" @update:visible="visible = $event" @close="close">
<div style="height: 200px; text-align: center">内容区域</div>
<div style="height: 200px; text-align: center">
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>

6
examples/sites/demos/pc/app/drawer/close-event.vue
View File

@ -2,7 +2,11 @@
<div>
<tiny-button @click="fn" type="primary"> 关闭事件示例 </tiny-button>
<tiny-drawer title="标题" :show-footer="true" :visible="visible" @update:visible="visible = $event" @close="close">
<div style="height: 200px; text-align: center">内容区域</div>
<div style="height: 200px; text-align: center">
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>

6
examples/sites/demos/pc/app/drawer/confirm-event-composition-api.vue
View File

@ -8,7 +8,11 @@
@update:visible="visible = $event"
@confirm="confirm"
>
<div style="height: 200px; text-align: center">内容区域</div>
<div style="height: 200px; text-align: center">
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>

6
examples/sites/demos/pc/app/drawer/confirm-event.vue
View File

@ -8,7 +8,11 @@
@update:visible="visible = $event"
@confirm="confirm"
>
<div style="height: 200px; text-align: center">内容区域</div>
<div style="height: 200px; text-align: center">
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>

1
examples/sites/demos/pc/app/drawer/dragable.spec.ts
View File

@ -6,6 +6,7 @@ test('宽度拖拽功能', async ({ page }) => {
const drawer = page.locator('.tiny-drawer__main')
await page.getByRole('button', { name: '宽度拖拽' }).click()
await page.waitForTimeout(500)
// 获取拖拽元素的位置
const { x, y } = await drawer.boundingBox()

6
examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue
View File

@ -2,7 +2,11 @@
<div>
<tiny-button @click="fn" type="primary"> 底部插槽示例 </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-footer="true">
<div>内容区域</div>
<div>
<br />
<br />
<span>内容区域</span>
</div>
<template #footer>
<div class="my-footer">

4
examples/sites/demos/pc/app/drawer/footer-slot.spec.ts
View File

@ -4,10 +4,12 @@ test('底部插槽', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('drawer#footer-slot')
const drawer = page.locator('#preview .tiny-drawer')
const drawer = page.locator('.tiny-drawer')
const footer = drawer.locator('.tiny-drawer__footer')
await page.getByRole('button', { name: '底部插槽示例' }).click()
await page.waitForTimeout(300)
await expect(footer).toBeVisible()
await expect(footer.locator('> div')).toHaveClass('my-footer')
await expect(footer).toContainText('自定义底部文本')

6
examples/sites/demos/pc/app/drawer/footer-slot.vue
View File

@ -2,7 +2,11 @@
<div>
<tiny-button @click="fn" type="primary"> 底部插槽示例 </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-footer="true">
<div>内容区域</div>
<div>
<br />
<br />
<span>内容区域</span>
</div>
<template #footer>
<div class="my-footer">

6
examples/sites/demos/pc/app/drawer/header-right-slot-composition-api.vue
View File

@ -7,7 +7,11 @@
<span>自定义头部右侧</span>
</div>
</template>
<div>内容区域</div>
<div>
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>

6
examples/sites/demos/pc/app/drawer/header-right-slot.vue
View File

@ -7,7 +7,11 @@
<span>自定义头部右侧</span>
</div>
</template>
<div>内容区域</div>
<div>
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>

6
examples/sites/demos/pc/app/drawer/header-slot-composition-api.vue
View File

@ -8,7 +8,11 @@
<p>自定义副标题xxxxxx</p>
</div>
</template>
<div>内容区域</div>
<div>
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>

17
examples/sites/demos/pc/app/drawer/header-slot.vue
View File

@ -8,7 +8,11 @@
<p>自定义副标题xxxxxx</p>
</div>
</template>
<div>内容区域</div>
<div>
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>
@ -39,4 +43,15 @@ export default {
padding: 0 32px;
border-bottom: 1px solid #ccc;
}
.my-header h3 {
font-size: 16px;
font-weight: bold;
line-height: 1.7;
}
.my-header p {
font-size: 12px;
line-height: 1.5;
}
</style>

2
examples/sites/demos/pc/app/drawer/mask-closable.spec.ts
View File

@ -4,7 +4,7 @@ test('点击遮罩层不关闭', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('drawer#mask-closable')
const drawer = page.locator('#preview .tiny-drawer__main')
const drawer = page.locator('.tiny-drawer__main')
await page.getByRole('button', { name: '单击遮罩层不关闭抽屉' }).click()
await page.locator('.tiny-drawer__mask').click()
await expect(drawer).toBeVisible()

6
examples/sites/demos/pc/app/drawer/placement-composition-api.vue
View File

@ -6,7 +6,11 @@
<tiny-button @click="fn('bottom')"> bottom </tiny-button>
<tiny-drawer title="标题" :placement="placement" v-model:visible="visible">
<div style="height: 200px; text-align: center">内容区域</div>
<div style="height: 200px; text-align: center">
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>

6
examples/sites/demos/pc/app/drawer/placement.vue
View File

@ -6,7 +6,11 @@
<tiny-button @click="fn('bottom')"> bottom </tiny-button>
<tiny-drawer title="标题" :placement="placement" :visible="visible" @update:visible="visible = $event">
<div style="height: 200px; text-align: center">内容区域</div>
<div style="height: 200px; text-align: center">
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>

6
examples/sites/demos/pc/app/drawer/show-close-composition-api.vue
View File

@ -2,7 +2,11 @@
<div>
<tiny-button @click="fn" type="primary"> 隐藏关闭图标 </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-close="false">
<div>内容区域</div>
<div>
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>

6
examples/sites/demos/pc/app/drawer/show-close.vue
View File

@ -2,7 +2,11 @@
<div>
<tiny-button @click="fn" type="primary"> 隐藏关闭图标 </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-close="false">
<div>内容区域</div>
<div>
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>

6
examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue
View File

@ -3,7 +3,11 @@
<tiny-button type="primary" @click="showDrawer()"> 显示底部 </tiny-button>
<tiny-drawer :show-footer="showFooter" title="标题" :visible="visible" @update:visible="visible = $event">
<div style="height: 200px; text-align: center">内容区域</div>
<div style="height: 200px; text-align: center">
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>

6
examples/sites/demos/pc/app/drawer/show-footer.vue
View File

@ -3,7 +3,11 @@
<tiny-button type="primary" @click="showDrawer()"> 显示底部 </tiny-button>
<tiny-drawer :show-footer="showFooter" title="标题" :visible="visible" @update:visible="visible = $event">
<div style="height: 200px; text-align: center">内容区域</div>
<div style="height: 200px; text-align: center">
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>

56
examples/sites/demos/pc/app/drawer/webdoc/drawer.js
View File

@ -13,7 +13,7 @@ export default {
'name': { 'zh-CN': '抽屉方向', 'en-US': '' },
'desc': {
'zh-CN':
'<p>添加 <code>placement</code> 属性设置抽屉的方向，可选值有 `left|right|top|bottom`，默认值为 `right`。</p>',
'<p>添加 <code>placement</code> 属性设置抽屉的方向，可选值有 <code>left | right | top | bottom</code>，默认值为 <code>right</code>。</p>',
'en-US': ''
},
'codeFiles': ['placement.vue']
@ -21,19 +21,25 @@ export default {
{
'demoId': 'width',
'name': { 'zh-CN': '抽屉宽度', 'en-US': '' },
'desc': { 'zh-CN': '<p>添加<code>width</code> 属性设置抽屉的宽度，默认值为 `500px`</p>', 'en-US': '' },
'desc': { 'zh-CN': '<p>添加<code>width</code> 属性设置抽屉的宽度，默认值为 <code>500px</code></p>', 'en-US': '' },
'codeFiles': ['width.vue']
},
{
'demoId': 'dragable',
'name': { 'zh-CN': '宽度拖拽功能', 'en-US': '' },
'desc': { 'zh-CN': '<p>添加 <code>dragable</code> 属性开启抽屉宽度拖拽功能，默认值为 false</p>', 'en-US': '' },
'desc': {
'zh-CN': '<p>添加 <code>dragable</code> 属性开启抽屉宽度拖拽功能，默认值为 <code>false</code>。</p>',
'en-US': ''
},
'codeFiles': ['dragable.vue']
},
{
'demoId': 'mask',
'name': { 'zh-CN': '遮罩层显示隐藏', 'en-US': '' },
'desc': { 'zh-CN': '<p>添加 <code>mask</code> 属性可以控制遮罩层显示隐藏，默认值为 true 。</p>', 'en-US': '' },
'desc': {
'zh-CN': '<p>添加 <code>mask</code> 属性可以控制遮罩层显示隐藏，默认值为 <code>true</code> 。</p>',
'en-US': ''
},
'codeFiles': ['mask.vue']
},
{
@ -41,7 +47,7 @@ export default {
'name': { 'zh-CN': '点击遮罩层关闭抽屉', 'en-US': '' },
'desc': {
'zh-CN':
'<p>默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 <code>mask-closable</code> 为 false 后将禁用该功能，默认值为 true 。</p>',
'<p>默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 <code>mask-closable</code> 为 <code>false</code> 后将禁用该功能，默认值为 <code>true</code> 。</p>',
'en-US': ''
},
'codeFiles': ['mask-closable.vue']
@ -49,19 +55,19 @@ export default {
{
'demoId': 'show-close',
'name': { 'zh-CN': '关闭图标显示', 'en-US': '' },
'desc': { 'zh-CN': '<p><code>show-close</code> 控制显示关闭图标，默认值为 true</p>', 'en-US': '' },
'desc': { 'zh-CN': '<p><code>show-close</code> 控制显示关闭图标，默认值为 <code>true</code>。</p>', 'en-US': '' },
'codeFiles': ['show-close.vue']
},
{
'demoId': 'show-header',
'name': { 'zh-CN': '头部显示', 'en-US': '' },
'desc': { 'zh-CN': '<p><code>show-header</code> 控制显示头部，默认值为 true</p>', 'en-US': '' },
'desc': { 'zh-CN': '<p><code>show-header</code> 控制显示头部，默认值为 <code>true</code>。</p>', 'en-US': '' },
'codeFiles': ['show-header.vue']
},
{
'demoId': 'show-footer',
'name': { 'zh-CN': '底部显示', 'en-US': '' },
'desc': { 'zh-CN': '<p><code>show-footer</code> 控制显示底部，默认值为 false</p>', 'en-US': '' },
'desc': { 'zh-CN': '<p><code>show-footer</code> 控制显示底部，默认值为 <code>false</code>。</p>', 'en-US': '' },
'codeFiles': ['show-footer.vue']
},
{
@ -83,31 +89,37 @@ export default {
{
'demoId': 'header-slot',
'name': { 'zh-CN': '头部插槽', 'en-US': '' },
'desc': { 'zh-CN': '<p>自定义头部内容，当<code>show-header</code>取值为 true 时有效</p>', 'en-US': '' },
'desc': {
'zh-CN': '<p>自定义头部内容，当<code>show-header</code>取值为 <code>true</code> 时有效。</p>',
'en-US': ''
},
'codeFiles': ['header-slot.vue']
},
{
'demoId': 'header-right-slot',
'name': { 'zh-CN': '头部右侧插槽', 'en-US': '' },
'desc': { 'zh-CN': '<p>自定义头部右侧内容，当<code>show-header</code>取值为 true 时有效</p>', 'en-US': '' },
'desc': {
'zh-CN': '<p>自定义头部右侧内容，当<code>show-header</code>取值为 <code>true</code> 时有效。</p>',
'en-US': ''
},
'codeFiles': ['header-right-slot.vue']
},
{
'demoId': 'footer-slot',
'name': { 'zh-CN': '底部插槽', 'en-US': '' },
'desc': { 'zh-CN': '<p>底部插槽，默认隐藏底部，设置 :show-footer="true" 时有效<p>', 'en-US': '' },
'desc': { 'zh-CN': '<p>底部插槽，默认隐藏底部，设置 <code>:show-footer="true"</code> 时有效。<p>', 'en-US': '' },
'codeFiles': ['footer-slot.vue']
},
{
'demoId': 'close-event',
'name': { 'zh-CN': '关闭事件', 'en-US': '' },
'desc': { 'zh-CN': '<p>关闭抽屉事件</p>', 'en-US': '' },
'desc': { 'zh-CN': '<p>关闭抽屉事件。</p>', 'en-US': '' },
'codeFiles': ['close-event.vue']
},
{
'demoId': 'confirm-event',
'name': { 'zh-CN': '确认事件', 'en-US': '' },
'desc': { 'zh-CN': '<p>确认事件，设置 :show-footer="true" 时有效</p>', 'en-US': '' },
'desc': { 'zh-CN': '<p>确认事件，设置 <code>:show-footer="true"</code> 时有效。</p>', 'en-US': '' },
'codeFiles': ['confirm-event.vue']
}
],
@ -125,9 +137,9 @@ export default {
},
{
'name': 'placement',
'type': 'string',
'type': `'left' | 'right' | 'top' | 'bottom' `,
'defaultValue': 'right',
'desc': { 'zh-CN': '添加 placement 属性设置抽屉的方向，可选值有 left|right|top|bottom', 'en-US': '' },
'desc': { 'zh-CN': '添加 placement 属性设置抽屉的方向', 'en-US': '' },
'demoId': 'placement'
},
{
@ -185,7 +197,7 @@ export default {
{
'name': 'z-index',
'type': 'number',
'defaultValue': '该属性的默认值为 2000',
'defaultValue': '2000',
'desc': { 'zh-CN': '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）', 'en-US': '' },
'demoId': 'z-index'
}
@ -193,14 +205,14 @@ export default {
'events': [
{
'name': 'close',
'type': 'Function(params)',
'type': '()=> void',
'defaultValue': '',
'desc': { 'zh-CN': '关闭抽屉事件', 'en-US': '' },
'demoId': 'close-event'
},
{
'name': 'confirm',
'type': 'Function(params)',
'type': '()=> void',
'defaultValue': '',
'desc': { 'zh-CN': '确认事件，设置 :show-footer="true" 时有效', 'en-US': '' },
'demoId': 'confirm-event'
@ -209,28 +221,28 @@ export default {
'slots': [
{
'name': 'default',
'type': '',
'type': '--',
'defaultValue': '',
'desc': { 'zh-CN': '默认插槽', 'en-US': '' },
'demoId': 'default-slot'
},
{
'name': 'header',
'type': '',
'type': '--',
'defaultValue': '',
'desc': { 'zh-CN': '头部插槽', 'en-US': '' },
'demoId': 'header-slot'
},
{
'name': 'header-right',
'type': '',
'type': '--',
'defaultValue': '',
'desc': { 'zh-CN': '头部右侧插槽', 'en-US': '' },
'demoId': 'header-right-slot'
},
{
'name': 'footer',
'type': '',
'type': '--',
'defaultValue': '',
'desc': { 'zh-CN': '底部插槽', 'en-US': '' },
'demoId': 'footer-slot'

6
examples/sites/demos/pc/app/drawer/z-index-composition-api.vue
View File

@ -2,7 +2,11 @@
<div>
<tiny-button @click="fn" type="primary"> 自定义z-index </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :z-index="zIndex">
<div>内容区域</div>
<div>
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>

6
examples/sites/demos/pc/app/drawer/z-index.vue
View File

@ -2,7 +2,11 @@
<div>
<tiny-button @click="fn" type="primary"> 自定义z-index </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :z-index="zIndex">
<div>内容区域</div>
<div>
<br />
<br />
<span>内容区域</span>
</div>
</tiny-drawer>
</div>
</template>