diff --git a/examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue
index f0a3457a9..a2adf479d 100644
--- a/examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue
@@ -2,7 +2,11 @@
抽屉组件
- 内容区域
+
+
+
+ 内容区域
+
diff --git a/examples/sites/demos/pc/app/drawer/basic-usage.spec.ts b/examples/sites/demos/pc/app/drawer/basic-usage.spec.ts
index dd0b7ad14..a10122a70 100644
--- a/examples/sites/demos/pc/app/drawer/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/drawer/basic-usage.spec.ts
@@ -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()
})
diff --git a/examples/sites/demos/pc/app/drawer/basic-usage.vue b/examples/sites/demos/pc/app/drawer/basic-usage.vue
index cf7e094fb..2d87857be 100644
--- a/examples/sites/demos/pc/app/drawer/basic-usage.vue
+++ b/examples/sites/demos/pc/app/drawer/basic-usage.vue
@@ -2,7 +2,11 @@
抽屉组件
- 内容区域
+
+
+
+ 内容区域
+
diff --git a/examples/sites/demos/pc/app/drawer/close-event-composition-api.vue b/examples/sites/demos/pc/app/drawer/close-event-composition-api.vue
index 52be6cdb9..2a4acf47d 100644
--- a/examples/sites/demos/pc/app/drawer/close-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/close-event-composition-api.vue
@@ -2,7 +2,11 @@
关闭事件示例
- 内容区域
+
+
+
+ 内容区域
+
diff --git a/examples/sites/demos/pc/app/drawer/close-event.vue b/examples/sites/demos/pc/app/drawer/close-event.vue
index 958369a22..02e317fbd 100644
--- a/examples/sites/demos/pc/app/drawer/close-event.vue
+++ b/examples/sites/demos/pc/app/drawer/close-event.vue
@@ -2,7 +2,11 @@
关闭事件示例
- 内容区域
+
+
+
+ 内容区域
+
diff --git a/examples/sites/demos/pc/app/drawer/confirm-event-composition-api.vue b/examples/sites/demos/pc/app/drawer/confirm-event-composition-api.vue
index ea1ed1580..32f9d04ec 100644
--- a/examples/sites/demos/pc/app/drawer/confirm-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/confirm-event-composition-api.vue
@@ -8,7 +8,11 @@
@update:visible="visible = $event"
@confirm="confirm"
>
- 内容区域
+
+
+
+ 内容区域
+
diff --git a/examples/sites/demos/pc/app/drawer/confirm-event.vue b/examples/sites/demos/pc/app/drawer/confirm-event.vue
index 2743e8e85..b6d932fa2 100644
--- a/examples/sites/demos/pc/app/drawer/confirm-event.vue
+++ b/examples/sites/demos/pc/app/drawer/confirm-event.vue
@@ -8,7 +8,11 @@
@update:visible="visible = $event"
@confirm="confirm"
>
- 内容区域
+
+
+
+ 内容区域
+
diff --git a/examples/sites/demos/pc/app/drawer/dragable.spec.ts b/examples/sites/demos/pc/app/drawer/dragable.spec.ts
index ad0cb6c95..293ea9b0e 100644
--- a/examples/sites/demos/pc/app/drawer/dragable.spec.ts
+++ b/examples/sites/demos/pc/app/drawer/dragable.spec.ts
@@ -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()
diff --git a/examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue b/examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue
index 49420f2f2..85ea7a937 100644
--- a/examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue
@@ -2,7 +2,11 @@
底部插槽示例
- 内容区域
+
+
+
+ 内容区域
+
- 内容区域
+
+
+
+ 内容区域
+
diff --git a/examples/sites/demos/pc/app/drawer/header-slot-composition-api.vue b/examples/sites/demos/pc/app/drawer/header-slot-composition-api.vue
index bbbb1eedf..f7f3860ef 100644
--- a/examples/sites/demos/pc/app/drawer/header-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/header-slot-composition-api.vue
@@ -8,7 +8,11 @@
自定义副标题xxxxxx
- 内容区域
+
+
+
+ 内容区域
+
diff --git a/examples/sites/demos/pc/app/drawer/header-slot.vue b/examples/sites/demos/pc/app/drawer/header-slot.vue
index 324ccbae2..f26252eaf 100644
--- a/examples/sites/demos/pc/app/drawer/header-slot.vue
+++ b/examples/sites/demos/pc/app/drawer/header-slot.vue
@@ -8,7 +8,11 @@
自定义副标题xxxxxx
- 内容区域
+
+
+
+ 内容区域
+
@@ -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;
+}
diff --git a/examples/sites/demos/pc/app/drawer/mask-closable.spec.ts b/examples/sites/demos/pc/app/drawer/mask-closable.spec.ts
index bcb7f35b0..9a39de97a 100644
--- a/examples/sites/demos/pc/app/drawer/mask-closable.spec.ts
+++ b/examples/sites/demos/pc/app/drawer/mask-closable.spec.ts
@@ -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()
diff --git a/examples/sites/demos/pc/app/drawer/placement-composition-api.vue b/examples/sites/demos/pc/app/drawer/placement-composition-api.vue
index d76bb8eca..6da54de1c 100644
--- a/examples/sites/demos/pc/app/drawer/placement-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/placement-composition-api.vue
@@ -6,7 +6,11 @@
bottom
- 内容区域
+
+
+
+ 内容区域
+
diff --git a/examples/sites/demos/pc/app/drawer/placement.vue b/examples/sites/demos/pc/app/drawer/placement.vue
index d50fb2877..64c97eaee 100644
--- a/examples/sites/demos/pc/app/drawer/placement.vue
+++ b/examples/sites/demos/pc/app/drawer/placement.vue
@@ -6,7 +6,11 @@
bottom
- 内容区域
+
+
+
+ 内容区域
+
diff --git a/examples/sites/demos/pc/app/drawer/show-close-composition-api.vue b/examples/sites/demos/pc/app/drawer/show-close-composition-api.vue
index b8f8d762d..64c589726 100644
--- a/examples/sites/demos/pc/app/drawer/show-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/show-close-composition-api.vue
@@ -2,7 +2,11 @@
隐藏关闭图标
- 内容区域
+
+
+
+ 内容区域
+
diff --git a/examples/sites/demos/pc/app/drawer/show-close.vue b/examples/sites/demos/pc/app/drawer/show-close.vue
index 332fb482c..c9e39bf29 100644
--- a/examples/sites/demos/pc/app/drawer/show-close.vue
+++ b/examples/sites/demos/pc/app/drawer/show-close.vue
@@ -2,7 +2,11 @@
隐藏关闭图标
- 内容区域
+
+
+
+ 内容区域
+
diff --git a/examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue b/examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue
index 9fdc9ce55..6b00e363b 100644
--- a/examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue
@@ -3,7 +3,11 @@
显示底部
- 内容区域
+
+
+
+ 内容区域
+
diff --git a/examples/sites/demos/pc/app/drawer/show-footer.vue b/examples/sites/demos/pc/app/drawer/show-footer.vue
index c29ef823b..9a3eb52f7 100644
--- a/examples/sites/demos/pc/app/drawer/show-footer.vue
+++ b/examples/sites/demos/pc/app/drawer/show-footer.vue
@@ -3,7 +3,11 @@
显示底部
- 内容区域
+
+
+
+ 内容区域
+
diff --git a/examples/sites/demos/pc/app/drawer/webdoc/drawer.js b/examples/sites/demos/pc/app/drawer/webdoc/drawer.js
index 15d6f60b3..09eddd926 100644
--- a/examples/sites/demos/pc/app/drawer/webdoc/drawer.js
+++ b/examples/sites/demos/pc/app/drawer/webdoc/drawer.js
@@ -13,7 +13,7 @@ export default {
'name': { 'zh-CN': '抽屉方向', 'en-US': '' },
'desc': {
'zh-CN':
- '添加 placement 属性设置抽屉的方向,可选值有 `left|right|top|bottom`,默认值为 `right`。
',
+ '添加 placement 属性设置抽屉的方向,可选值有 left | right | top | bottom,默认值为 right。
',
'en-US': ''
},
'codeFiles': ['placement.vue']
@@ -21,19 +21,25 @@ export default {
{
'demoId': 'width',
'name': { 'zh-CN': '抽屉宽度', 'en-US': '' },
- 'desc': { 'zh-CN': '添加width 属性设置抽屉的宽度,默认值为 `500px`
', 'en-US': '' },
+ 'desc': { 'zh-CN': '添加width 属性设置抽屉的宽度,默认值为 500px
', 'en-US': '' },
'codeFiles': ['width.vue']
},
{
'demoId': 'dragable',
'name': { 'zh-CN': '宽度拖拽功能', 'en-US': '' },
- 'desc': { 'zh-CN': '添加 dragable 属性开启抽屉宽度拖拽功能,默认值为 false
', 'en-US': '' },
+ 'desc': {
+ 'zh-CN': '添加 dragable 属性开启抽屉宽度拖拽功能,默认值为 false。
',
+ 'en-US': ''
+ },
'codeFiles': ['dragable.vue']
},
{
'demoId': 'mask',
'name': { 'zh-CN': '遮罩层显示隐藏', 'en-US': '' },
- 'desc': { 'zh-CN': '添加 mask 属性可以控制遮罩层显示隐藏,默认值为 true 。
', 'en-US': '' },
+ 'desc': {
+ 'zh-CN': '添加 mask 属性可以控制遮罩层显示隐藏,默认值为 true 。
',
+ 'en-US': ''
+ },
'codeFiles': ['mask.vue']
},
{
@@ -41,7 +47,7 @@ export default {
'name': { 'zh-CN': '点击遮罩层关闭抽屉', 'en-US': '' },
'desc': {
'zh-CN':
- '默认弹窗打开后,可以单击遮罩层关闭弹窗,设置 mask-closable 为 false 后将禁用该功能,默认值为 true 。
',
+ '默认弹窗打开后,可以单击遮罩层关闭弹窗,设置 mask-closable 为 false 后将禁用该功能,默认值为 true 。
',
'en-US': ''
},
'codeFiles': ['mask-closable.vue']
@@ -49,19 +55,19 @@ export default {
{
'demoId': 'show-close',
'name': { 'zh-CN': '关闭图标显示', 'en-US': '' },
- 'desc': { 'zh-CN': 'show-close 控制显示关闭图标,默认值为 true
', 'en-US': '' },
+ 'desc': { 'zh-CN': 'show-close 控制显示关闭图标,默认值为 true。
', 'en-US': '' },
'codeFiles': ['show-close.vue']
},
{
'demoId': 'show-header',
'name': { 'zh-CN': '头部显示', 'en-US': '' },
- 'desc': { 'zh-CN': 'show-header 控制显示头部,默认值为 true
', 'en-US': '' },
+ 'desc': { 'zh-CN': 'show-header 控制显示头部,默认值为 true。
', 'en-US': '' },
'codeFiles': ['show-header.vue']
},
{
'demoId': 'show-footer',
'name': { 'zh-CN': '底部显示', 'en-US': '' },
- 'desc': { 'zh-CN': 'show-footer 控制显示底部,默认值为 false
', 'en-US': '' },
+ 'desc': { 'zh-CN': 'show-footer 控制显示底部,默认值为 false。
', 'en-US': '' },
'codeFiles': ['show-footer.vue']
},
{
@@ -83,31 +89,37 @@ export default {
{
'demoId': 'header-slot',
'name': { 'zh-CN': '头部插槽', 'en-US': '' },
- 'desc': { 'zh-CN': '自定义头部内容,当show-header取值为 true 时有效
', 'en-US': '' },
+ 'desc': {
+ 'zh-CN': '自定义头部内容,当show-header取值为 true 时有效。
',
+ 'en-US': ''
+ },
'codeFiles': ['header-slot.vue']
},
{
'demoId': 'header-right-slot',
'name': { 'zh-CN': '头部右侧插槽', 'en-US': '' },
- 'desc': { 'zh-CN': '自定义头部右侧内容,当show-header取值为 true 时有效
', 'en-US': '' },
+ 'desc': {
+ 'zh-CN': '自定义头部右侧内容,当show-header取值为 true 时有效。
',
+ 'en-US': ''
+ },
'codeFiles': ['header-right-slot.vue']
},
{
'demoId': 'footer-slot',
'name': { 'zh-CN': '底部插槽', 'en-US': '' },
- 'desc': { 'zh-CN': '底部插槽,默认隐藏底部,设置 :show-footer="true" 时有效
', 'en-US': '' },
+ 'desc': { 'zh-CN': '
底部插槽,默认隐藏底部,设置 :show-footer="true" 时有效。
', 'en-US': '' },
'codeFiles': ['footer-slot.vue']
},
{
'demoId': 'close-event',
'name': { 'zh-CN': '关闭事件', 'en-US': '' },
- 'desc': { 'zh-CN': '
关闭抽屉事件
', 'en-US': '' },
+ 'desc': { 'zh-CN': '关闭抽屉事件。
', 'en-US': '' },
'codeFiles': ['close-event.vue']
},
{
'demoId': 'confirm-event',
'name': { 'zh-CN': '确认事件', 'en-US': '' },
- 'desc': { 'zh-CN': '确认事件,设置 :show-footer="true" 时有效
', 'en-US': '' },
+ 'desc': { 'zh-CN': '确认事件,设置 :show-footer="true" 时有效。
', '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'
diff --git a/examples/sites/demos/pc/app/drawer/z-index-composition-api.vue b/examples/sites/demos/pc/app/drawer/z-index-composition-api.vue
index 326341e4f..ce2c5e4f8 100644
--- a/examples/sites/demos/pc/app/drawer/z-index-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/z-index-composition-api.vue
@@ -2,7 +2,11 @@
自定义z-index
- 内容区域
+
+
+
+ 内容区域
+
diff --git a/examples/sites/demos/pc/app/drawer/z-index.vue b/examples/sites/demos/pc/app/drawer/z-index.vue
index b6e17d10c..231b4259d 100644
--- a/examples/sites/demos/pc/app/drawer/z-index.vue
+++ b/examples/sites/demos/pc/app/drawer/z-index.vue
@@ -2,7 +2,11 @@
自定义z-index
- 内容区域
+
+
+
+ 内容区域
+