Skip to content

Commit c04abde

Browse files
James-9696James-9696
authored
fix(drawer): [drawer] modify theme and demo (#3200)
* fix: modify theme and demo * fix: modify e2e * fix: modify review comments * fix: modify review comments
1 parent 7ecb88f commit c04abde

14 files changed

+60
-61
lines changed

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,32 @@ import { test, expect } from '@playwright/test'
33
test('拦截弹窗关闭', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('drawer#before-close')
6+
const demo = page.locator('#before-close')
67

7-
const drawer = page.locator('.tiny-drawer__main')
8+
const drawer = demo.locator('.tiny-drawer__main')
89
const message = page.locator('.tiny-modal__text')
910

10-
await page.getByRole('button', { name: '点击展开 Drawer' }).click()
11+
await demo.getByRole('button', { name: '点击展开 Drawer' }).click()
1112
await expect(drawer).toBeVisible()
1213

1314
// 点击关闭按钮
14-
await page.getByRole('button', { name: 'Close' }).click()
15+
await demo.getByRole('button', { name: 'Close' }).click()
1516
await expect(message).toContainText('close')
1617
await expect(drawer).toBeVisible()
1718

1819
// 点击遮罩层
19-
await page.locator('.tiny-drawer__mask').click()
20+
await demo.locator('.tiny-drawer__mask').click()
2021
await expect(drawer).toBeVisible()
2122

2223
// 点击底部确定按钮
2324
await page.locator('#before-close').getByRole('button', { name: '确定' }).click()
2425
await expect(drawer).toBeVisible()
2526

2627
// 点击底部取消按钮
27-
await page.getByRole('button', { name: '取消' }).click()
28+
await demo.getByRole('button', { name: '取消' }).click()
2829
await expect(drawer).toBeVisible()
2930

3031
// 自定义关闭方法
31-
await page.getByRole('button', { name: '关闭 Drawer' }).click()
32+
await demo.getByRole('button', { name: '关闭 Drawer' }).click()
3233
await expect(drawer).not.toBeVisible()
3334
})

‎examples/sites/demos/pc/app/drawer/dragable.spec.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ test.describe('可拖拽', () => {
44
test('宽度拖拽功能', async ({ page }) => {
55
page.on('pageerror', (exception) => expect(exception).toBeNull())
66
await page.goto('drawer#dragable')
7-
8-
const drawer = page.locator('.tiny-drawer__main')
7+
const demo = page.locator('#dragable')
8+
const drawer = demo.locator('.tiny-drawer__main')
99
await page.getByRole('button', { name: '宽度拖拽' }).click()
1010
await page.waitForTimeout(500)
1111

@@ -26,8 +26,8 @@ test.describe('可拖拽', () => {
2626
test('高度拖拽功能', async ({ page }) => {
2727
page.on('pageerror', (exception) => expect(exception).toBeNull())
2828
await page.goto('drawer#dragable')
29-
30-
const drawer = page.locator('.tiny-drawer__main')
29+
const demo = page.locator('#dragable')
30+
const drawer = demo.locator('.tiny-drawer__main')
3131
await page.getByRole('button', { name: '高度拖拽' }).click()
3232
await page.waitForTimeout(500)
3333

‎examples/sites/demos/pc/app/drawer/events.spec.ts

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,37 @@ import { test, expect } from '@playwright/test'
33
test('事件', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('drawer#events')
6-
7-
const drawer = page.locator('.tiny-drawer__main')
6+
const demo = page.locator('#events')
7+
const drawer = demo.locator('.tiny-drawer__main')
88

99
// 显示事件
1010
const showMsg = page.locator('.tiny-modal.type__message').filter({ hasText: '打开事件' }).first()
11-
await page.getByRole('button', { name: '点击打开抽屉' }).click()
11+
await demo.getByRole('button', { name: '点击打开抽屉' }).click()
1212
await expect(showMsg).toBeVisible()
13-
await expect(drawer).toBeVisible()
1413

1514
// 确定事件
1615
const confirmMsg = page.locator('.tiny-modal.type__message').filter({ hasText: '确定事件' }).first()
17-
await page.getByRole('button', { name: '确定' }).click()
16+
await demo.getByRole('button', { name: '确定' }).click()
1817
await expect(confirmMsg).toBeVisible()
19-
await expect(drawer).not.toBeVisible()
18+
})
2019

20+
test('close事件', async ({ page }) => {
21+
page.on('pageerror', (exception) => expect(exception).toBeNull())
22+
await page.goto('drawer#events')
23+
const demo = page.locator('#events')
24+
const drawer = demo.locator('.tiny-drawer__main')
2125
// 关闭事件
2226
const closeMsg = page.locator('.tiny-modal.type__message').filter({ hasText: '关闭事件' }).first()
23-
await page.getByRole('button', { name: '点击打开抽屉' }).click()
27+
await demo.getByRole('button', { name: '点击打开抽屉' }).click()
2428
// 右上角关闭按钮
2529
await drawer.locator('.tiny-drawer__headerbtn').click()
2630
await expect(closeMsg).toBeVisible()
2731
// 底部按钮关闭
28-
await page.getByRole('button', { name: '点击打开抽屉' }).click()
29-
await page.getByRole('button', { name: '取消' }).click()
32+
await demo.getByRole('button', { name: '点击打开抽屉' }).click()
33+
await demo.getByRole('button', { name: '取消' }).click()
3034
await expect(closeMsg).toBeVisible()
3135
// 点击蒙层关闭
32-
await page.getByRole('button', { name: '点击打开抽屉' }).click()
33-
await page.locator('.tiny-drawer__mask').click()
36+
await demo.getByRole('button', { name: '点击打开抽屉' }).click()
37+
await demo.locator('.tiny-drawer__mask').click()
3438
await expect(closeMsg).toBeVisible()
3539
})

‎examples/sites/demos/pc/app/drawer/footer-slot.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import { test, expect } from '@playwright/test'
33
test('底部插槽', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('drawer#footer-slot')
6-
7-
const drawer = page.locator('.tiny-drawer')
6+
const demo = page.locator('#footer-slot')
7+
const drawer = demo.locator('.tiny-drawer')
88
const footer = drawer.locator('.tiny-drawer__footer')
99

10-
await page.getByRole('button', { name: '底部插槽示例' }).click()
10+
await demo.getByRole('button', { name: '底部插槽示例' }).click()
1111

1212
await page.waitForTimeout(300)
1313
await expect(footer).toBeVisible()

‎examples/sites/demos/pc/app/drawer/header-right-slot.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import { test, expect } from '@playwright/test'
33
test('头部右侧插槽', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('drawer#header-right-slot')
6-
7-
const drawer = page.locator('.tiny-drawer__main')
6+
const demo = page.locator('#header-right-slot')
7+
const drawer = demo.locator('.tiny-drawer__main')
88
const headerRight = drawer.locator('.tiny-drawer__header-right')
99

10-
await page.getByRole('button', { name: '头部右侧插槽示例' }).click()
10+
await demo.getByRole('button', { name: '头部右侧插槽示例' }).click()
1111
await expect(headerRight).toBeVisible()
1212
await expect(headerRight).toContainText('自定义头部右侧')
1313
})

‎examples/sites/demos/pc/app/drawer/header-slot.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { test, expect } from '@playwright/test'
33
test('头部插槽', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('drawer#header-slot')
6-
7-
const drawer = page.locator('.tiny-drawer__main')
6+
const demo = page.locator('#header-slot')
7+
const drawer = demo.locator('.tiny-drawer__main')
88
const header = drawer.locator('.tiny-drawer__header-wrapper')
9-
await page.getByRole('button', { name: '头部插槽示例' }).click()
9+
await demo.getByRole('button', { name: '头部插槽示例' }).click()
1010
await expect(header.locator('> div')).toHaveClass('my-header')
1111
await expect(header).toContainText('自定义头部标题')
1212
})

‎examples/sites/demos/pc/app/drawer/mask-closable.spec.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { test, expect } from '@playwright/test'
33
test('点击遮罩层不关闭', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('drawer#mask-closable')
6-
7-
const drawer = page.locator('.tiny-drawer__main')
8-
await page.getByRole('button', { name: '单击遮罩层不关闭抽屉' }).click()
9-
await page.locator('.tiny-drawer__mask').click()
6+
const demo = page.locator('#mask-closable')
7+
const drawer = demo.locator('.tiny-drawer__main')
8+
await demo.getByRole('button', { name: '单击遮罩层不关闭抽屉' }).click()
9+
await demo.locator('.tiny-drawer__mask').click()
1010
await expect(drawer).toBeVisible()
1111
})

‎examples/sites/demos/pc/app/drawer/placement.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
33
test('抽屉方向', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('drawer#placement')
6-
7-
const drawer = page.locator('.tiny-drawer__main')
6+
const demo = page.locator('#placement')
7+
const drawer = demo.locator('.tiny-drawer__main')
88

99
await page.getByRole('button', { name: 'left' }).click()
1010
await expect(drawer).toHaveCSS('left', '0px')

‎examples/sites/demos/pc/app/drawer/show-footer.spec.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@ import { test, expect } from '@playwright/test'
33
test('底部显示', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('drawer#show-footer')
6-
7-
const drawerFooter = page.locator('.tiny-drawer__header')
8-
9-
await page.getByRole('button', { name: '显示底部' }).click()
6+
const demo = page.locator('#show-footer')
7+
const drawerFooter = demo.locator('.tiny-drawer__header')
8+
await demo.getByRole('button', { name: '显示底部' }).click()
109
await expect(drawerFooter).toBeVisible()
1110
})

‎examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<script lang="tsx" setup>
88
import { ref } from 'vue'
99
import { TinyDrawer, TinyButton, Notify } from '@opentiny/vue'
10-
import { iconHelp } from '@opentiny/vue-icon'
1110
1211
let drawerInstance = null
1312
@@ -16,7 +15,6 @@ const closeDrawer = () => {
1615
drawerInstance.close()
1716
}
1817
}
19-
const IconHelp = iconHelp()
2018
const config = ref({
2119
// props
2220
title: '这是一个通过方法打开的抽屉',
@@ -41,12 +39,12 @@ const config = ref({
4139
// 通过属性 customSlots 设置插槽，插槽内容可以是 string | VNode | ({h, $drawer}) => VNode
4240
customSlots: {
4341
// 使用 h 函数
44-
default: (h) => h('p', { class: '' }, '抽屉主体内容。'),
42+
default: (h) => h('div', { class: '' }, ''),
4543
// 返回 VNode 节点的方法，可通过参数中 $drawer 访问到组件实例
46-
headerRight: () => <IconHelp style="width:20px;height:20px"></IconHelp>,
44+
headerRight: '',
4745
// 直接赋值 VNode
4846
footer: (
49-
<TinyButton type="primary" onClick={closeDrawer}>
47+
<TinyButton type="primary" round onClick={closeDrawer}>
5048
点击关闭
5149
</TinyButton>
5250
)

0 commit comments

Comments
 (0)