move 0
- move 1
- 向右移动4格
- 向左移动6格
- move 0
+ move 1
+ 向右移动4格
+ 向左移动6格
+ 反馈 Feedback
-
+
@@ -24,7 +24,7 @@
diff --git a/examples/docs/resources/pc/demo/fullscreen/example-component.vue b/examples/docs/resources/pc/demo/fullscreen/example-component.vue
index a023419e5..135bd725b 100644
--- a/examples/docs/resources/pc/demo/fullscreen/example-component.vue
+++ b/examples/docs/resources/pc/demo/fullscreen/example-component.vue
@@ -30,8 +30,8 @@
- 
- 
+ 
+ 
效率 Efficiency
-
+
@@ -41,15 +41,15 @@
-
+
+
diff --git a/examples/docs/resources/pc/demo/collapse/nested-grid.spec.ts b/examples/docs/resources/pc/demo/collapse/nested-grid.spec.ts
index 73e55daa6..07de4e397 100644
--- a/examples/docs/resources/pc/demo/collapse/nested-grid.spec.ts
+++ b/examples/docs/resources/pc/demo/collapse/nested-grid.spec.ts
@@ -5,5 +5,5 @@ test('Collapse 嵌套表格', async ({ page }) => {
await page.goto('http://localhost:7130/pc/collapse/nested-grid')
const content = page.locator('.tiny-collapse-item__content')
- await expect(content.locator('.tiny-grid')).toBeVisible()
+ await expect(content.locator('.tiny-grid').nth(0)).toBeVisible()
})
diff --git a/examples/docs/resources/pc/demo/container/basic-usage.spec.js b/examples/docs/resources/pc/demo/container/basic-usage.spec.js
index 67edc55c9..8340262ac 100644
--- a/examples/docs/resources/pc/demo/container/basic-usage.spec.js
+++ b/examples/docs/resources/pc/demo/container/basic-usage.spec.js
@@ -1,12 +1,16 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '@playwright/test'
-test('test', async ({ page }) => {
- await page.goto('http://localhost:7130/pc/container/custom-container');
- await page.getByText('默认布局').click();
- await page.locator('#preview').getByText('Header').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]')).toHaveAttribute('style', 'height: 60px;');
- await page.locator('#preview').getByText('Aside').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]')).toHaveAttribute('style', 'width: 200px; top: 60px;');
- await page.getByText('Main').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[3]')).toHaveAttribute('style', 'top: 60px; left: 200px; bottom: 0px;');
-});
\ No newline at end of file
+test('基础用法', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/container/custom-container')
+ await page.getByText('默认布局').click()
+ await page.locator('#preview').getByText('Header').click()
+ await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 60px;')
+ await page.locator('#preview').getByText('Aside').click()
+ await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute('style', 'width: 200px; top: 60px;')
+ await page.getByText('Main').click()
+ await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute(
+ 'style',
+ 'top: 60px; left: 200px; bottom: 0px;'
+ )
+})
diff --git a/examples/docs/resources/pc/demo/container/basic-usage.vue b/examples/docs/resources/pc/demo/container/basic-usage.vue
index 2af79515e..c9e93c9d2 100644
--- a/examples/docs/resources/pc/demo/container/basic-usage.vue
+++ b/examples/docs/resources/pc/demo/container/basic-usage.vue
@@ -23,36 +23,3 @@ export default {
}
-
diff --git a/examples/docs/resources/pc/demo/container/classic.spec.js b/examples/docs/resources/pc/demo/container/classic.spec.js
index 34bd636de..e4ec773ea 100644
--- a/examples/docs/resources/pc/demo/container/classic.spec.js
+++ b/examples/docs/resources/pc/demo/container/classic.spec.js
@@ -1,12 +1,13 @@
import { test, expect } from '@playwright/test';
-test('test', async ({ page }) => {
+test('经典布局', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/container/simple');
await page.getByText('经典布局').click();
await page.locator('#preview').getByText('header').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]')).toHaveAttribute('style', 'height: 60px;');
+ await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 60px;');
await page.getByText('Main').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]')).toHaveAttribute('style', 'top: 60px; left: 0px; bottom: 60px;');
+ await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute('style', 'top: 60px; left: 0px; bottom: 60px;');
await page.locator('#preview').getByText('footer').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[3]')).toHaveAttribute('style', 'height: 60px; left: 0px;');
+ await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute('style', 'height: 60px; left: 0px;');
});
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/container/classic.vue b/examples/docs/resources/pc/demo/container/classic.vue
index 4ab1c83c4..20395a80e 100644
--- a/examples/docs/resources/pc/demo/container/classic.vue
+++ b/examples/docs/resources/pc/demo/container/classic.vue
@@ -29,44 +29,4 @@ export default {
}
}
}
-
-
-
+
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/container/custom-container.spec.js b/examples/docs/resources/pc/demo/container/custom-container.spec.js
index eb45d5f22..1d0d75d5d 100644
--- a/examples/docs/resources/pc/demo/container/custom-container.spec.js
+++ b/examples/docs/resources/pc/demo/container/custom-container.spec.js
@@ -1,25 +1,41 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '@playwright/test'
-test('test', async ({ page }) => {
- await page.goto('http://localhost:7130/pc/container/simple');
- await page.getByText('版型切换').click();
- await page.getByLabel('默认:default').check();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]')).toHaveAttribute('style', 'height: 60px;');
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[3]')).toHaveAttribute('style', 'top: 60px; left: 200px; bottom: 0px;');
- await page.getByLabel('经典:classic').check();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]')).toHaveAttribute('style', 'height: 60px;');
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]')).toHaveAttribute('style', 'top: 60px; left: 0px; bottom: 60px;');
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[3]')).toHaveAttribute('style', 'height: 60px; left: 0px;');
- await page.getByLabel('简约:simple').check();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]')).toHaveAttribute('style', 'top: 0px; width: 200px;');
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]')).toHaveAttribute('style', 'top: 0px; left: 200px; bottom: 0px;');
- await page.getByLabel('时尚:fashion').check();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]')).toHaveAttribute('style', 'height: 60px; left: 200px;');
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]')).toHaveAttribute('style', 'top: 0px; width: 200px;');
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[3]')).toHaveAttribute('style', 'top: 60px; left: 200px; bottom: 0px;');
- await page.getByLabel('传奇:legend').check();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]')).toHaveAttribute('style', 'height: 60px;');
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]')).toHaveAttribute('style', 'top: 60px; width: 200px;');
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[3]')).toHaveAttribute('style', 'top: 60px; left: 200px; bottom: 60px;');
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[4]')).toHaveAttribute('style', 'height: 60px; left: 200px;');
-});
\ No newline at end of file
+test('版型切换', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/container/simple')
+ await page.getByText('版型切换').click()
+ await page.getByLabel('默认:default').check()
+ await expect(page.locator('.tiny-container > div').first(1)).toHaveAttribute('style', 'height: 60px;')
+ await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute(
+ 'style',
+ 'top: 60px; left: 200px; bottom: 0px;'
+ )
+ await page.getByLabel('经典:classic').check()
+ await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 60px;')
+ await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute(
+ 'style',
+ 'top: 60px; left: 0px; bottom: 60px;'
+ )
+ await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute('style', 'height: 60px; left: 0px;')
+ await page.getByLabel('简约:simple').check()
+ await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'top: 0px; width: 200px;')
+ await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute(
+ 'style',
+ 'top: 0px; left: 200px; bottom: 0px;'
+ )
+ await page.getByLabel('时尚:fashion').check()
+ await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 60px; left: 200px;')
+ await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute('style', 'top: 0px; width: 200px;')
+ await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute(
+ 'style',
+ 'top: 60px; left: 200px; bottom: 0px;'
+ )
+ await page.getByLabel('传奇:legend').check()
+ await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 60px;')
+ await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute('style', 'top: 60px; width: 200px;')
+ await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute(
+ 'style',
+ 'top: 60px; left: 200px; bottom: 60px;'
+ )
+ await expect(page.locator('.tiny-container > div').nth(3)).toHaveAttribute('style', 'height: 60px; left: 200px;')
+})
diff --git a/examples/docs/resources/pc/demo/container/custom-container.vue b/examples/docs/resources/pc/demo/container/custom-container.vue
index 8701a57f6..a584ab3bc 100644
--- a/examples/docs/resources/pc/demo/container/custom-container.vue
+++ b/examples/docs/resources/pc/demo/container/custom-container.vue
@@ -60,43 +60,3 @@ export default {
}
}
-
-
diff --git a/examples/docs/resources/pc/demo/container/custom-with-height.spec.js b/examples/docs/resources/pc/demo/container/custom-with-height.spec.js
index cc4912790..512af00e1 100644
--- a/examples/docs/resources/pc/demo/container/custom-with-height.spec.js
+++ b/examples/docs/resources/pc/demo/container/custom-with-height.spec.js
@@ -1,12 +1,13 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '@playwright/test'
-test('test', async ({ page }) => {
- await page.goto('http://localhost:7130/pc/container/legend');
- await page.locator('.f12 > div:nth-child(6)').click();
- await page.getByText('header-height：80').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]')).toHaveAttribute('style', 'height: 80px;');
- await page.getByText('aside-width：200').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]')).toHaveAttribute('style', 'width: 200px; top: 80px;');
- await page.getByText('footer-height：80').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[4]')).toHaveAttribute('style', 'height: 80px; left: 200px;');
-});
\ No newline at end of file
+test('自定义宽度和高度', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/container/custom-with-height')
+ await page.locator('.f12 > div:nth-child(6)').click()
+ await page.getByText('header-height：80').click()
+ await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 80px;')
+ await page.getByText('aside-width：200').click()
+ await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute('style', 'width: 200px; top: 80px;')
+ await page.getByText('footer-height：80').click()
+ await expect(page.locator('.tiny-container > div').nth(3)).toHaveAttribute('style', 'height: 80px; left: 200px;')
+})
diff --git a/examples/docs/resources/pc/demo/container/custom-with-height.vue b/examples/docs/resources/pc/demo/container/custom-with-height.vue
index e4c1fef67..ad2487750 100644
--- a/examples/docs/resources/pc/demo/container/custom-with-height.vue
+++ b/examples/docs/resources/pc/demo/container/custom-with-height.vue
@@ -33,43 +33,3 @@ export default {
}
}
-
-
diff --git a/examples/docs/resources/pc/demo/container/fashion.spec.js b/examples/docs/resources/pc/demo/container/fashion.spec.js
index 756613841..ba55d229f 100644
--- a/examples/docs/resources/pc/demo/container/fashion.spec.js
+++ b/examples/docs/resources/pc/demo/container/fashion.spec.js
@@ -1,12 +1,16 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '@playwright/test'
-test('test', async ({ page }) => {
- await page.goto('http://localhost:7130/pc/container/classic');
- await page.getByText('时尚布局').click();
- await page.locator('#preview').getByText('Aside').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]')).toHaveAttribute('style', 'top: 0px; width: 200px;');
- await page.locator('#preview').getByText('Header').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]')).toHaveAttribute('style', 'height: 60px; left: 200px;');
- await page.getByText('Main').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[3]')).toHaveAttribute('style', 'top: 60px; left: 200px; bottom: 0px;');
-});
\ No newline at end of file
+test('时尚布局', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/container/classic')
+ await page.getByText('时尚布局').click()
+ await page.locator('#preview').getByText('Aside').click()
+ await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute('style', 'top: 0px; width: 200px;')
+ await page.locator('#preview').getByText('Header').click()
+ await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 60px; left: 200px;')
+ await page.getByText('Main').click()
+ await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute(
+ 'style',
+ 'top: 60px; left: 200px; bottom: 0px;'
+ )
+})
diff --git a/examples/docs/resources/pc/demo/container/fashion.vue b/examples/docs/resources/pc/demo/container/fashion.vue
index c81ed6e2b..fd6ef4477 100644
--- a/examples/docs/resources/pc/demo/container/fashion.vue
+++ b/examples/docs/resources/pc/demo/container/fashion.vue
@@ -23,36 +23,3 @@ export default {
}
-
diff --git a/examples/docs/resources/pc/demo/container/legend.spec.js b/examples/docs/resources/pc/demo/container/legend.spec.js
index 10024ff5d..a42ebf7e4 100644
--- a/examples/docs/resources/pc/demo/container/legend.spec.js
+++ b/examples/docs/resources/pc/demo/container/legend.spec.js
@@ -1,14 +1,24 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '@playwright/test'
-test('test', async ({ page }) => {
- await page.goto('http://localhost:7130/pc/container/fashionid');
- await page.getByText('传奇布局').click();
- await page.locator('#preview').getByText('Header').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]')).toHaveAttribute('style', 'height: 60px;');
- await page.locator('#preview').getByText('Aside').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]')).toHaveAttribute('style', 'width: 200px; top: 60px;');
- await page.getByText('Main').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[3]')).toHaveAttribute('style', 'top: 60px; left: 200px; bottom: 60px;');
- await page.locator('#preview').getByText('Footer').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[4]')).toHaveAttribute('style', 'height: 60px; left: 200px;');
-});
\ No newline at end of file
+test('传奇布局', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/container/fashionid')
+ await page.getByText('传奇布局').click()
+ await page.locator('#preview').getByText('Header').click()
+ await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 60px;')
+ await page.locator('#preview').getByText('Aside').click()
+ await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute(
+ 'style',
+ 'width: 200px; top: 60px;'
+ )
+ await page.getByText('Main').click()
+ await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute(
+ 'style',
+ 'top: 60px; left: 200px; bottom: 60px;'
+ )
+ await page.locator('#preview').getByText('Footer').click()
+ await expect(page.locator('.tiny-container > div').nth(3)).toHaveAttribute(
+ 'style',
+ 'height: 60px; left: 200px;'
+ )
+})
diff --git a/examples/docs/resources/pc/demo/container/legend.vue b/examples/docs/resources/pc/demo/container/legend.vue
index f393a8d21..92c129761 100644
--- a/examples/docs/resources/pc/demo/container/legend.vue
+++ b/examples/docs/resources/pc/demo/container/legend.vue
@@ -26,36 +26,3 @@ export default {
}
-
diff --git a/examples/docs/resources/pc/demo/container/simple.spec.js b/examples/docs/resources/pc/demo/container/simple.spec.js
index 2b37ce2b4..2e9d78a89 100644
--- a/examples/docs/resources/pc/demo/container/simple.spec.js
+++ b/examples/docs/resources/pc/demo/container/simple.spec.js
@@ -1,10 +1,14 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '@playwright/test'
-test('test', async ({ page }) => {
- await page.goto('http://localhost:7130/pc/container/basic-usage');
- await page.getByText('简约布局').click();
- await page.locator('#preview').getByText('Aside').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]')).toHaveAttribute('style', 'top: 0px; width: 200px;');
- await page.getByText('Main').click();
- await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]')).toHaveAttribute('style', 'top: 0px; left: 200px; bottom: 0px;');
-});
\ No newline at end of file
+test('简约布局', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/container/basic-usage')
+ await page.getByText('简约布局').click()
+ await page.locator('#preview').getByText('Aside').click()
+ await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'top: 0px; width: 200px;')
+ await page.getByText('Main').click()
+ await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute(
+ 'style',
+ 'top: 0px; left: 200px; bottom: 0px;'
+ )
+})
diff --git a/examples/docs/resources/pc/demo/container/simple.vue b/examples/docs/resources/pc/demo/container/simple.vue
index c815d6e0a..ef0ec49a4 100644
--- a/examples/docs/resources/pc/demo/container/simple.vue
+++ b/examples/docs/resources/pc/demo/container/simple.vue
@@ -20,36 +20,3 @@ export default {
}
-
diff --git a/examples/docs/resources/pc/demo/crop/get-container-data.vue b/examples/docs/resources/pc/demo/crop/get-container-data.vue
index d1219db83..03f1acba4 100644
--- a/examples/docs/resources/pc/demo/crop/get-container-data.vue
+++ b/examples/docs/resources/pc/demo/crop/get-container-data.vue
@@ -1,7 +1,7 @@
获取容器数据
- 获取裁剪框数据
- 获取裁剪后的图片数据
- 获取图像数据
- 替换图片
- {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/about-clear')
+ const dateInputHasText = page.getByRole('textbox', { name: '2023-05-24' })
+ await expect(dateInputHasText).toBeVisible()
+ await dateInputHasText.hover()
+ await page.locator('div:nth-child(2) > .tiny-date-editor .tiny-input__icon-container > svg').first().click()
+ await expect(dateInputHasText).not.toBeVisible()
+})
diff --git a/examples/docs/resources/pc/demo/date-picker/about-clear.vue b/examples/docs/resources/pc/demo/date-picker/about-clear.vue
index 90d2a65e2..2b897606a 100644
--- a/examples/docs/resources/pc/demo/date-picker/about-clear.vue
+++ b/examples/docs/resources/pc/demo/date-picker/about-clear.vue
@@ -27,7 +27,7 @@ export default {
data() {
return {
value1: new Date(),
- value2: new Date(),
+ value2: new Date('2023-05-24'),
IconMinus: IconMinus()
}
}
diff --git a/examples/docs/resources/pc/demo/date-picker/about-format.spec.ts b/examples/docs/resources/pc/demo/date-picker/about-format.spec.ts
new file mode 100644
index 000000000..af6b7c84f
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/about-format.spec.ts
@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test'
+
+test('[DatePicker] 测试日期格式化', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/about-format')
+ const dateInputDefault = page.getByRole('textbox', { name: '2023 年 05 月 20 日' })
+ const dateInputTimestamp = page.getByRole('textbox', { name: '2020 年 5 月 20 日 0 时 0 分钟 0 秒 AM' })
+ const dateInputString = page.getByRole('textbox', { name: '2020 年 05 月 20 日' })
+
+ await page.getByRole('textbox', { name: '2023 年 05 月 24 日' }).click()
+ await page.getByRole('cell', { name: '20' }).getByText('20').click()
+ await expect(dateInputDefault).toBeVisible()
+
+ await page.getByRole('textbox', { name: '2020 年 5 月 22 日 0 时 0 分钟 0 秒 AM' }).click()
+ await page.getByRole('cell', { name: '20' }).getByText('20').nth(1).click()
+ await expect(dateInputTimestamp).toBeVisible()
+
+ await page.getByRole('textbox', { name: '2020 年 05 月 22 日' }).click()
+ await page.getByRole('cell', { name: '20' }).getByText('20').nth(1).click()
+ await expect(dateInputString).toBeVisible()
+})
diff --git a/examples/docs/resources/pc/demo/date-picker/about-format.vue b/examples/docs/resources/pc/demo/date-picker/about-format.vue
index 91a5a3715..720206647 100644
--- a/examples/docs/resources/pc/demo/date-picker/about-format.vue
+++ b/examples/docs/resources/pc/demo/date-picker/about-format.vue
@@ -32,7 +32,7 @@ export default {
},
data() {
return {
- value1: new Date(),
+ value1: new Date('2023-05-24'),
value2: 1590076800000,
value3: '2020-05-22'
}
diff --git a/examples/docs/resources/pc/demo/date-picker/align.spec.ts b/examples/docs/resources/pc/demo/date-picker/align.spec.ts
new file mode 100644
index 000000000..b2c2f8666
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/align.spec.ts
@@ -0,0 +1,32 @@
+import { expect, test } from '@playwright/test'
+
+test('[DatePicker] 测试对齐方式', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/align')
+
+ // 左对齐
+ const leftDateInputDom = page.getByRole('textbox').nth(1)
+ const leftDatePanelDom = page.locator('body > div:nth-child(3)')
+ console.log('leftDatePanelDom', leftDatePanelDom);
+
+ const { x: leftDateInputX } = await leftDateInputDom.boundingBox()
+ await leftDateInputDom.click()
+ const { x: leftDatePanelX } = await leftDatePanelDom.boundingBox()
+ expect(leftDateInputX - leftDatePanelX).toBeCloseTo(0)
+
+ // 右对齐
+ const rightDateInputDom = page.getByRole('textbox').nth(2)
+ const rightDatePanelDom = page.locator('body > div:nth-child(4)')
+ const { x: rightDateInputX, width: rightDateInputWidth } = await rightDateInputDom.boundingBox()
+ await rightDateInputDom.click()
+ const { x: rightDatePanelX, width: rightDatePanelWidth } = await rightDatePanelDom.boundingBox()
+ expect(rightDateInputX + rightDateInputWidth - rightDatePanelX - rightDatePanelWidth).toBeCloseTo(0)
+
+ // 居中对齐
+ const centerDateInputDom = page.getByRole('textbox').nth(3)
+ const centerDatePanelDom = page.locator('body > div:nth-child(5)')
+ const { x: centerDateInputX, width: centerDateInputWidth } = await centerDateInputDom.boundingBox()
+ await centerDateInputDom.click()
+ const { x: centerDatePanelX, width: centerDatePanelWidth } = await centerDatePanelDom.boundingBox()
+ expect(centerDateInputX + Math.round(centerDateInputWidth / 2) - centerDatePanelX - Math.round(centerDatePanelWidth / 2)).toBeCloseTo(0)
+})
diff --git a/examples/docs/resources/pc/demo/date-picker/basic-usage.spec.ts b/examples/docs/resources/pc/demo/date-picker/basic-usage.spec.ts
new file mode 100644
index 000000000..f6ac83335
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/basic-usage.spec.ts
@@ -0,0 +1,87 @@
+import { test, expect } from '@playwright/test'
+
+test('[DatePicker] 测试日期选择和清除', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/basic-usage')
+ const dateInput = page.getByRole('textbox', { name: '2023-05-20' })
+ const dateInput2 = page.getByRole('textbox', { name: '2023-05-21' })
+ const clearIcon = page.locator('#preview').getByRole('img').nth(1)
+
+ await page.locator('#preview').getByRole('textbox').fill('2023-05-20')
+ await page.locator('#preview').getByRole('textbox').press('Enter')
+ await expect(dateInput).toBeVisible()
+
+ // 测试日期选择
+ await dateInput.click()
+ await page.getByText('21', { exact: true }).click()
+ await expect(dateInput2).toBeVisible()
+
+ // 测试日期清除
+ await dateInput2.hover()
+ await expect(clearIcon).toBeVisible()
+ await clearIcon.click()
+ await expect(dateInput2).not.toBeVisible()
+})
+
+test('[DatePicker] 测试上一月/下一月/前一年/后一年', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/basic-usage')
+ const dateInputNextMonth = page.getByRole('textbox', { name: '2023-06-04' })
+ const dateInputNextYear = page.getByRole('textbox', { name: '2024-06-01' })
+ const dateInputPreMonth = page.getByRole('textbox', { name: '2023-05-14' })
+ const dateInputPreYear = page.getByRole('textbox', { name: '2023-06-11' })
+
+ // 先输入一个日期，确保后续选中的月份、年份正确
+ await page.locator('#preview').getByRole('textbox').click()
+ await page.locator('#preview').getByRole('textbox').fill('2023-05-20')
+ await page.locator('#preview').getByRole('textbox').press('Enter')
+
+ // 下一月/后一年
+ await page.locator('#preview').getByRole('textbox').click()
+ await page.getByRole('button', { name: '下个月' }).click()
+ await page.getByRole('row', { name: '4 5 6 7 8 9 10' }).getByText('4').click()
+ await expect(dateInputNextMonth).toBeVisible()
+
+ await dateInputNextMonth.click()
+ await page.getByRole('button', { name: '后一年' }).click()
+ await page.getByRole('row', { name: '26 27 28 29 30 31 1' }).getByText('1', { exact: true }).click()
+ await expect(dateInputNextYear).toBeVisible()
+
+ // 前一年/上一月
+ await dateInputNextYear.click()
+ await page.getByRole('button', { name: '前一年' }).click()
+ await page.getByText('11', { exact: true }).click()
+ await expect(dateInputPreYear).toBeVisible()
+
+ await dateInputPreYear.click()
+ await page.getByRole('button', { name: '上个月' }).click()
+ await page.getByText('14').click()
+ await expect(dateInputPreMonth).toBeVisible()
+})
+
+test('[DatePicker] 测试月份/年份选择', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/basic-usage')
+ const dateInputMonth = page.getByRole('textbox', { name: '2023-06-04' })
+ const dateInputYear = page.getByRole('textbox', { name: '2024-02-07' })
+
+ // 先输入一个日期，确保后续选中的月份、年份正确
+ await page.locator('#preview').getByRole('textbox').click()
+ await page.locator('#preview').getByRole('textbox').fill('2023-04-20')
+ await page.locator('#preview').getByRole('textbox').press('Enter')
+
+ // 选择月份
+ await page.locator('#preview').getByRole('textbox').click()
+ await page.getByRole('button', { name: '4 月' }).click()
+ await page.getByText('六月').click()
+ await page.getByRole('row', { name: '4 5 6 7 8 9 10' }).getByText('4').click()
+ await expect(dateInputMonth).toBeVisible()
+
+ // 选择年份
+ await dateInputMonth.click()
+ await page.getByRole('button', { name: '2023 年' }).click()
+ await page.getByText('2024').click()
+ await page.getByText('二月', { exact: true }).click()
+ await page.getByRole('row', { name: '4 5 6 7 8 9 10' }).getByText('7').click()
+ await expect(dateInputYear).toBeVisible()
+})
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/date-picker/custom-range.spec.ts b/examples/docs/resources/pc/demo/date-picker/custom-range.spec.ts
new file mode 100644
index 000000000..cb98c49f5
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/custom-range.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('[DatePicker] 测试范围选择自定义', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/custom-range')
+ expect(page.getByPlaceholder('开始日期')).toBeVisible()
+ expect(page.getByText('至', { exact: true })).toBeVisible()
+ expect(page.getByPlaceholder('结束日期')).toBeVisible()
+})
diff --git a/examples/docs/resources/pc/demo/date-picker/custom-suffix-icon.spec.ts b/examples/docs/resources/pc/demo/date-picker/custom-suffix-icon.spec.ts
new file mode 100644
index 000000000..6e6162d95
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/custom-suffix-icon.spec.ts
@@ -0,0 +1,8 @@
+import { expect, test } from '@playwright/test'
+
+test('[DatePicker] 测试自定义后置图标', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/custom-suffix-icon')
+ const svgPathDom = page.locator('i path')
+ await expect(svgPathDom).toHaveAttribute('d', 'M19.1 13H4.9c-.5 0-.9-.4-.9-1s.4-1 .9-1h14.2c.5 0 .9.4.9 1s-.4 1-.9 1z')
+})
diff --git a/examples/docs/resources/pc/demo/date-picker/date-picker-events.spec.ts b/examples/docs/resources/pc/demo/date-picker/date-picker-events.spec.ts
new file mode 100644
index 000000000..a37eb8d5d
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/date-picker-events.spec.ts
@@ -0,0 +1,23 @@
+import { expect, test } from '@playwright/test'
+
+test('[DatePicker] 测试事件', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/date-picker-events')
+
+ // blur 事件
+ await page.getByRole('textbox').nth(1).click()
+ await page.getByText('blur：').click()
+ const blurEventMessageDom = page.locator('div').filter({ hasText: '可获取组件实例' }).nth(1)
+ await expect(blurEventMessageDom).toBeVisible()
+
+ // change 事件
+ await page.getByRole('textbox').nth(2).click()
+ await page.getByRole('cell', { name: '20' }).getByText('20').last().click()
+ const changeEventMessageDom = page.locator('div').filter({ hasText: '组件绑定值' }).nth(1)
+ await expect(changeEventMessageDom).toBeVisible()
+
+ // focus 事件
+ await page.getByRole('textbox').nth(3).click()
+ const focusEventMessageDom = page.locator('div').filter({ hasText: '回调参数为组件实例' }).nth(1)
+ await expect(focusEventMessageDom).toBeVisible()
+})
diff --git a/examples/docs/resources/pc/demo/date-picker/date-range-shortcuts.spec.ts b/examples/docs/resources/pc/demo/date-picker/date-range-shortcuts.spec.ts
new file mode 100644
index 000000000..be793b6ab
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/date-range-shortcuts.spec.ts
@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test'
+
+// 将日期格式化为 YYYY-MM-DD 格式
+const formatDate = date => date.toISOString().slice(0, 10)
+
+test('[DatePicker] 测试日期范围快捷选项', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/date-range-shortcuts')
+ const dateInputStartDate = page.getByRole('textbox').nth(1)
+
+ // 最近一周
+ const startDateWeek = new Date()
+ startDateWeek.setTime(startDateWeek.getTime() - 3600 * 1000 * 24 * 7)
+
+ // 最近一个月
+ const startDateMonth = new Date()
+ startDateMonth.setTime(startDateMonth.getTime() - 3600 * 1000 * 24 * 30)
+
+ // 最近三个月
+ const startDateThreeMonth = new Date()
+ startDateThreeMonth.setTime(startDateThreeMonth.getTime() - 3600 * 1000 * 24 * 90)
+
+ await dateInputStartDate.click()
+ await page.getByRole('button', { name: '最近一周' }).click()
+ expect(await dateInputStartDate.inputValue()).toBe(formatDate(startDateWeek))
+
+ await dateInputStartDate.click()
+ await page.getByRole('button', { name: '最近一个月' }).click()
+ expect(await dateInputStartDate.inputValue()).toBe(formatDate(startDateMonth))
+
+ await dateInputStartDate.click()
+ await page.getByRole('button', { name: '最近三个月' }).click()
+ expect(await dateInputStartDate.inputValue()).toBe(formatDate(startDateThreeMonth))
+})
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/date-picker/date-range.spec.ts b/examples/docs/resources/pc/demo/date-picker/date-range.spec.ts
new file mode 100644
index 000000000..397954e4e
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/date-range.spec.ts
@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('测试日期范围选择', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/date-range')
+ const startDateDom = page.getByRole('textbox').nth(1)
+ const endDateDom = page.getByRole('textbox').nth(2)
+
+ await startDateDom.click()
+ await page.getByRole('row', { name: '14 15 16 17 18 19 20' }).getByText('14').click()
+ await page.getByRole('row', { name: '14 15 16 17 18 19 20' }).getByText('20').click()
+ expect(await startDateDom.inputValue()).toBe('2023-05-14')
+ expect(await endDateDom.inputValue()).toBe('2023-05-20')
+ await startDateDom.hover()
+ await page.locator('#preview').getByRole('img').nth(1).click()
+ expect(await startDateDom.inputValue()).not.toBe('2023-05-14')
+ expect(await endDateDom.inputValue()).not.toBe('2023-05-20')
+})
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/date-picker/date-range.vue b/examples/docs/resources/pc/demo/date-picker/date-range.vue
index 96834a84b..23779d779 100644
--- a/examples/docs/resources/pc/demo/date-picker/date-range.vue
+++ b/examples/docs/resources/pc/demo/date-picker/date-range.vue
@@ -14,7 +14,7 @@ export default {
},
data() {
return {
- value: [new Date(), new Date(2019, 12, 12)],
+ value: [new Date(2023, 4, 15), new Date(2023, 4, 21)],
onPickOptions: {
onPick: (val) => {
if (val.maxDate) {
diff --git a/examples/docs/resources/pc/demo/date-picker/date-shortcuts.spec.ts b/examples/docs/resources/pc/demo/date-picker/date-shortcuts.spec.ts
new file mode 100644
index 000000000..5480a2ec8
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/date-shortcuts.spec.ts
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('[DatePicker] 测试选择快捷选项日期：今天/昨天/一周前', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/date-shortcuts')
+ const datePickerDom = page.locator('body > .tiny-date-picker')
+ // 选择今天/昨天/一周前
+ await page.locator('#preview').getByRole('textbox').click()
+ await expect(datePickerDom).toBeVisible()
+ await page.getByRole('button', { name: '今天' }).click()
+ await page.locator('.tiny-date-editor input').click()
+ await page.getByRole('button', { name: '昨天' }).click()
+ await page.locator('.tiny-date-editor input').click()
+ await page.getByRole('button', { name: '一周前' }).click()
+ await expect(datePickerDom).not.toBeVisible()
+})
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/date-picker/default-time-of-range.spec.ts b/examples/docs/resources/pc/demo/date-picker/default-time-of-range.spec.ts
new file mode 100644
index 000000000..483623fa5
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/default-time-of-range.spec.ts
@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test'
+
+test('[DatePicker] 测试日期范围默认时刻', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/default-time-of-range')
+ const startDateDom = page.getByRole('textbox').nth(1)
+ const endDateDom = page.getByRole('textbox').nth(2)
+
+ await page.getByRole('textbox').nth(1).click()
+ await page.getByRole('row', { name: '14 15 16 17 18 19 20' }).getByText('14').click()
+ await page.getByRole('row', { name: '14 15 16 17 18 19 20' }).getByText('20').click()
+ await page.getByPlaceholder('开始时间').click()
+ await page.locator('li:nth-child(2) > span').first().click()
+ await page.locator('div:nth-child(2) > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(2) > span').first().click()
+ await page.locator('div:nth-child(3) > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(2) > span').first().click()
+ await page.getByRole('button', { name: '确定' }).first().click()
+ await page.getByPlaceholder('结束时间').click()
+ await page.getByRole('button', { name: '确定' }).last().click()
+ expect(await startDateDom.inputValue()).toBe('2023-05-14 01:01:01')
+ expect(await endDateDom.inputValue()).toBe('2023-05-20 23:59:59')
+})
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/date-picker/default-time-of-range.vue b/examples/docs/resources/pc/demo/date-picker/default-time-of-range.vue
index ee8d9f228..2a3fd0847 100644
--- a/examples/docs/resources/pc/demo/date-picker/default-time-of-range.vue
+++ b/examples/docs/resources/pc/demo/date-picker/default-time-of-range.vue
@@ -14,7 +14,7 @@ export default {
},
data() {
return {
- value: []
+ value: [new Date(2023, 4, 15), new Date(2023, 4, 21)]
}
}
}
diff --git a/examples/docs/resources/pc/demo/date-picker/default-value.spec.ts b/examples/docs/resources/pc/demo/date-picker/default-value.spec.ts
new file mode 100644
index 000000000..fc52573a7
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/default-value.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('[DatePicker] 测试选择器打开时默认时间设置', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/default-value')
+ const dateInput = page.getByRole('textbox', { name: '2000-11-11' })
+
+ await page.getByRole('textbox', { name: '2000-11-10' }).click()
+ await page.getByText('11', { exact: true }).click()
+ await expect(dateInput).toBeVisible()
+})
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/date-picker/editable.spec.ts b/examples/docs/resources/pc/demo/date-picker/editable.spec.ts
new file mode 100644
index 000000000..9077c2481
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/editable.spec.ts
@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('[DatePicker] 测试文本框不可输入', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/editable')
+ const dateInputDom = page.getByRole('textbox').nth(1)
+ await expect(dateInputDom).toHaveAttribute('readonly', '')
+})
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/date-picker/focus.spec.ts b/examples/docs/resources/pc/demo/date-picker/focus.spec.ts
new file mode 100644
index 000000000..129c71920
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/focus.spec.ts
@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test'
+
+test('[DatePicker] 测试获取焦点', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/focus')
+
+ const datePanelDom = page.locator('body > .tiny-picker-panel')
+
+ // 禁用日期输入框之后，无法通过 focus 方法获取焦点
+ await page.getByRole('button', { name: '启用/禁用' }).click()
+ await page.getByRole('button', { name: '获取焦点' }).click()
+ await expect(datePanelDom).not.toBeVisible()
+
+ // 启用日期输入框之后，可以通过 focus 方法获取焦点
+ await page.getByRole('button', { name: '启用/禁用' }).click()
+ await page.getByRole('button', { name: '获取焦点' }).click()
+ await expect(datePanelDom).toBeVisible()
+})
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/date-picker/max-min.spec.ts b/examples/docs/resources/pc/demo/date-picker/max-min.spec.ts
new file mode 100644
index 000000000..07478f431
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/max-min.spec.ts
@@ -0,0 +1,6 @@
+import { test,expect } from '@playwright/test'
+
+test('[DatePicker] 测试最大最小值', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/max-min')
+})
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/date-picker/month-range-shortcuts.spec.ts b/examples/docs/resources/pc/demo/date-picker/month-range-shortcuts.spec.ts
new file mode 100644
index 000000000..9470c3969
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/month-range-shortcuts.spec.ts
@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test'
+
+test('[DatePicker] 测试月份范围快捷选项', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/month-range-shortcuts')
+})
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/date-picker/month-range.spec.ts b/examples/docs/resources/pc/demo/date-picker/month-range.spec.ts
new file mode 100644
index 000000000..04923968a
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/month-range.spec.ts
@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test'
+
+test('[DatePicker] 测试选择月份范围', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/date-picker/month-range')
+})
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/date-picker/month-range.vue b/examples/docs/resources/pc/demo/date-picker/month-range.vue
index f22990d5a..e52272154 100644
--- a/examples/docs/resources/pc/demo/date-picker/month-range.vue
+++ b/examples/docs/resources/pc/demo/date-picker/month-range.vue
@@ -1,5 +1,5 @@
-
-
+
黄金糕
狮子头
diff --git a/examples/docs/resources/pc/demo/dropdown/inherit-width.vue b/examples/docs/resources/pc/demo/dropdown/inherit-width.vue
new file mode 100644
index 000000000..7a17ca66b
--- /dev/null
+++ b/examples/docs/resources/pc/demo/dropdown/inherit-width.vue
@@ -0,0 +1,42 @@
+
+
+ 更多菜单
+
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/dropdown/options.vue b/examples/docs/resources/pc/demo/dropdown/options.vue
index 0a1e11d96..e6f492918 100644
--- a/examples/docs/resources/pc/demo/dropdown/options.vue
+++ b/examples/docs/resources/pc/demo/dropdown/options.vue
@@ -14,9 +14,9 @@
diff --git a/examples/docs/resources/pc/demo/dropdown/visible-arrow.vue b/examples/docs/resources/pc/demo/dropdown/visible-arrow.vue
new file mode 100644
index 000000000..02c0907b3
--- /dev/null
+++ b/examples/docs/resources/pc/demo/dropdown/visible-arrow.vue
@@ -0,0 +1,26 @@
+
+
+
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/floatbar/custom-style.vue b/examples/docs/resources/pc/demo/floatbar/custom-style.vue
index 4d85e58b6..1eea0e193 100644
--- a/examples/docs/resources/pc/demo/floatbar/custom-style.vue
+++ b/examples/docs/resources/pc/demo/floatbar/custom-style.vue
@@ -19,14 +19,13 @@ export default {
}
-
diff --git a/examples/docs/resources/pc/demo/form/custom-validation-rule.vue b/examples/docs/resources/pc/demo/form/custom-validation-rule.vue
index 75a48dadc..b8aa812f6 100644
--- a/examples/docs/resources/pc/demo/form/custom-validation-rule.vue
+++ b/examples/docs/resources/pc/demo/form/custom-validation-rule.vue
@@ -59,7 +59,7 @@ export default {
rules: {
username: [
{ required: true, message: '必填', trigger: 'blur' },
- { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
+ { min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
],
password: [
{ required: true, message: '必填', trigger: 'blur' },
diff --git a/examples/docs/resources/pc/demo/form/form-validation.vue b/examples/docs/resources/pc/demo/form/form-validation.vue
index d1550110d..24b704d7a 100644
--- a/examples/docs/resources/pc/demo/form/form-validation.vue
+++ b/examples/docs/resources/pc/demo/form/form-validation.vue
@@ -105,7 +105,7 @@ export default {
radio: [{ required: true, message: '必填', trigger: 'change' }],
users: [
{ required: true, message: '必填', trigger: 'blur' },
- { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
+ { min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
],
datepicker: { type: 'date' },
url: { type: 'url' },
diff --git a/examples/docs/resources/pc/demo/form/smb-required.spec.js b/examples/docs/resources/pc/demo/form/smb-required.spec.js
new file mode 100644
index 000000000..77abbffd7
--- /dev/null
+++ b/examples/docs/resources/pc/demo/form/smb-required.spec.js
@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test'
+
+test('测试分组表单', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('http://localhost:7130/pc/form/smb-required')
+
+ const preview = page.locator('#preview')
+ const form = preview.locator('.tiny-form')
+ const firstLabel = form.locator('.tiny-form-item__label').first()
+
+ await expect(firstLabel).toBeVisible()
+ let beforeElement = await page.evaluate(() => {
+ const labelBefore = document.querySelector(".tiny-form .tiny-form-item__label")
+ const { display, content } = window.getComputedStyle(labelBefore, '::before')
+ return { display, content }
+ })
+
+ // 默认主题下，必填项的星号出现
+ expect(beforeElement.display).toBe('inline-block')
+ expect(beforeElement.content).toBe('"*"')
+
+ // 切换到SMB主题，红色星号不出现
+ await page.getByRole('button', { name: '切换主题' }).hover();
+ await page.waitForTimeout(500)
+ await page.locator('div').filter({ hasText: 'SMB Theme' }).first().click();
+ await expect(firstLabel).toBeVisible()
+ beforeElement = await page.evaluate(() => {
+ const labelBefore = document.querySelector(".tiny-form .tiny-form-item__label")
+ const { display, content } = window.getComputedStyle(labelBefore, '::before')
+ return { display, content }
+ })
+ expect(beforeElement.display).toBe('none')
+ expect(beforeElement.content).toBe('"*"')
+})
diff --git a/examples/docs/resources/pc/demo/form/smb-required.vue b/examples/docs/resources/pc/demo/form/smb-required.vue
new file mode 100644
index 000000000..b621859af
--- /dev/null
+++ b/examples/docs/resources/pc/demo/form/smb-required.vue
@@ -0,0 +1,97 @@
+
+
-
+
+
- 清除裁剪区域数据
+ 清除裁剪区域数据
获取裁剪区域数据
-
diff --git a/examples/docs/resources/pc/demo/crop/get-image-data.vue b/examples/docs/resources/pc/demo/crop/get-image-data.vue
index 2f861cbdd..5cd158f42 100644
--- a/examples/docs/resources/pc/demo/crop/get-image-data.vue
+++ b/examples/docs/resources/pc/demo/crop/get-image-data.vue
@@ -1,7 +1,7 @@
+ 抽屉组件
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/drawer/close-event.vue b/examples/docs/resources/pc/demo/drawer/close-event.vue
new file mode 100644
index 000000000..958369a22
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drawer/close-event.vue
@@ -0,0 +1,32 @@
+
+ 内容区域
+
+ 关闭事件示例
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/drawer/confirm-event.vue b/examples/docs/resources/pc/demo/drawer/confirm-event.vue
new file mode 100644
index 000000000..2f53d3fe4
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drawer/confirm-event.vue
@@ -0,0 +1,32 @@
+
+ 内容区域
+
+ 确认事件示例
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/drawer/default-slot.vue b/examples/docs/resources/pc/demo/drawer/default-slot.vue
new file mode 100644
index 000000000..0c6e6f909
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drawer/default-slot.vue
@@ -0,0 +1,29 @@
+
+ 内容区域
+
+ 抽屉默认插槽示例
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/drawer/dragable.vue b/examples/docs/resources/pc/demo/drawer/dragable.vue
new file mode 100644
index 000000000..e7ca1b029
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drawer/dragable.vue
@@ -0,0 +1,29 @@
+
+ 默认插槽内容
+
+ 宽度拖拽
+
+ 横向拖拽左边框可改变抽屉主体宽度
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/drawer/footer-slot.vue b/examples/docs/resources/pc/demo/drawer/footer-slot.vue
new file mode 100644
index 000000000..3c9ddeb53
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drawer/footer-slot.vue
@@ -0,0 +1,44 @@
+
+
+ 底部插槽示例
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/drawer/header-right-slot.vue b/examples/docs/resources/pc/demo/drawer/header-right-slot.vue
new file mode 100644
index 000000000..3fb1e2b14
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drawer/header-right-slot.vue
@@ -0,0 +1,40 @@
+
+ 内容区域
+
+
+
+
+
+ 头部右侧插槽示例
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/drawer/header-slot.vue b/examples/docs/resources/pc/demo/drawer/header-slot.vue
new file mode 100644
index 000000000..c0d8de59a
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drawer/header-slot.vue
@@ -0,0 +1,42 @@
+
+
+ 自定义头部右侧
+
+
+ 内容区域
+
+ 头部插槽示例
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/drawer/mask-closable.vue b/examples/docs/resources/pc/demo/drawer/mask-closable.vue
new file mode 100644
index 000000000..8bd6c49bd
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drawer/mask-closable.vue
@@ -0,0 +1,29 @@
+
+
+
+
+ 自定义头部标题
+自定义副标题xxxxxx
+内容区域
+
+ 单击遮罩层不关闭抽屉
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/drawer/mask.vue b/examples/docs/resources/pc/demo/drawer/mask.vue
new file mode 100644
index 000000000..7c56ee6dd
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drawer/mask.vue
@@ -0,0 +1,29 @@
+
+ 单击遮罩层, 不关闭抽屉
+
+ 关闭遮罩层
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/drawer/placement.vue b/examples/docs/resources/pc/demo/drawer/placement.vue
new file mode 100644
index 000000000..90f9320c6
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drawer/placement.vue
@@ -0,0 +1,35 @@
+
+ 左侧遮罩层已隐藏
+
+ left
+ right
+ top
+ bottom
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/drawer/show-close.vue b/examples/docs/resources/pc/demo/drawer/show-close.vue
new file mode 100644
index 000000000..332fb482c
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drawer/show-close.vue
@@ -0,0 +1,29 @@
+
+ 内容区域
+
+ 隐藏关闭图标
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/drawer/show-footer.vue b/examples/docs/resources/pc/demo/drawer/show-footer.vue
new file mode 100644
index 000000000..c29ef823b
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drawer/show-footer.vue
@@ -0,0 +1,31 @@
+
+ 内容区域
+
+ 显示底部
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/drawer/show-header.vue b/examples/docs/resources/pc/demo/drawer/show-header.vue
new file mode 100644
index 000000000..27772802d
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drawer/show-header.vue
@@ -0,0 +1,29 @@
+
+ 内容区域
+
+ 隐藏头部
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/drawer/slot.vue b/examples/docs/resources/pc/demo/drawer/slot.vue
new file mode 100644
index 000000000..22690849a
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drawer/slot.vue
@@ -0,0 +1,32 @@
+
+ 内容区域
+
+ 抽屉组件
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/drawer/width.vue b/examples/docs/resources/pc/demo/drawer/width.vue
new file mode 100644
index 000000000..c531c6915
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drawer/width.vue
@@ -0,0 +1,33 @@
+
+ 自定义关闭
+
+ 内容区域
+
+ 抽屉组件
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/drawer/z-index.vue b/examples/docs/resources/pc/demo/drawer/z-index.vue
new file mode 100644
index 000000000..9f5ab3ea8
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drawer/z-index.vue
@@ -0,0 +1,30 @@
+
+
+ 抽屉宽度改为 700px
+ 抽屉宽度改为 80%
+
+
+ 自定义z-index
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo/dropdown/basic-usage.vue b/examples/docs/resources/pc/demo/dropdown/basic-usage.vue
index 877d79b91..f01a050c3 100644
--- a/examples/docs/resources/pc/demo/dropdown/basic-usage.vue
+++ b/examples/docs/resources/pc/demo/dropdown/basic-usage.vue
@@ -1,7 +1,7 @@
内容区域
+
+
+ 更多菜单
+
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
+
+ 默认
+设置inherit-width
+
+
+
+
+
+
+
+
+
+
+ 注册
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/fullscreen/example-api.vue b/examples/docs/resources/pc/demo/fullscreen/example-api.vue
index 9ccabf316..340ad6a9f 100644
--- a/examples/docs/resources/pc/demo/fullscreen/example-api.vue
+++ b/examples/docs/resources/pc/demo/fullscreen/example-api.vue
@@ -17,8 +17,8 @@
-
-
+
+
-
+
+