+
+
+
diff --git a/examples/sites/demos/pc/app/modal/basic-usage.spec.ts b/examples/sites/demos/pc/app/modal/basic-usage.spec.ts
deleted file mode 100644
index c3df351aa5..0000000000
--- a/examples/sites/demos/pc/app/modal/basic-usage.spec.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('基本用法', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#basic-usage')
-
- const modal = page.locator('.tiny-modal.type__alert').nth(1)
- const confirm = page.locator('.tiny-modal.type__confirm')
- const notify = page.locator('.tiny-notify__message-zone > .tiny-notify__content-wrapper > .tiny-notify__content')
-
- // 基本提示框
- await page.getByRole('button', { name: /基本提示框/ }).click()
- await expect(modal).toBeVisible()
- await expect(modal).toHaveClass(/is__mask/)
- await page.getByRole('button', { name: /确定/, exact: true }).click()
- await expect(modal).not.toBeVisible()
- await page.getByRole('button', { name: /基本提示框/ }).click()
- await page.locator('.tiny-modal__close-btn').click()
- await expect(modal).not.toBeVisible()
-
- // 成功提示框
- await page.getByRole('button', { name: /成功提示框/ }).click()
- await expect(modal).toHaveClass(/status__success/)
- await expect(modal.locator('.tiny-modal__header svg').first()).toHaveClass(/tiny-modal-svg__success/)
- await page.getByRole('button', { name: /确定/, exact: true }).click()
- await expect(page.locator('.tiny-modal.type__alert.status__success')).not.toBeVisible()
-
- // 失败提示框
- await page.getByRole('button', { name: /失败提示框/ }).click()
- await expect(modal).toHaveClass(/status__error/)
- await expect(modal.locator('.tiny-modal__header svg').first()).toHaveClass(/tiny-svg tiny-modal-svg__error/)
- await page.getByRole('button', { name: /确定/, exact: true }).click()
- await expect(page.locator('.tiny-modal.type__alert.status__error')).not.toBeVisible()
-
- // 确认提示框
- await page.getByRole('button', { name: /确认提示框/ }).click()
- await page.getByRole('button', { name: '确定' }).click()
- expect(notify).toHaveText('点击confirm按钮')
- await page.getByRole('button', { name: /支持传入 jsx 提示框/ }).click()
- await page.locator('.tiny-modal__close-btn').click()
- await expect(confirm).not.toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/modal/basic-usage.vue b/examples/sites/demos/pc/app/modal/basic-usage.vue
index 7e1fb7459b..284b140a03 100644
--- a/examples/sites/demos/pc/app/modal/basic-usage.vue
+++ b/examples/sites/demos/pc/app/modal/basic-usage.vue
@@ -1,10 +1,25 @@
- 函数式调用
+
+ 弹窗模式：
+ 基本提示框
+ 成功提示框
+ 确认提示框
+ 支持传入 jsx 提示框
+
+
+ 消息模式：
+ 消息提示
+
+
+ 标签式调用
+
+
+
+ 打开弹窗1
+ 打开弹窗2
+
- 基本提示框
- 成功提示框
- 失败提示框
- 确认提示框
- 支持传入 jsx 提示框
+ 按 Esc 键可以关闭弹出框
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/esc-closable.spec.ts b/examples/sites/demos/pc/app/modal/esc-closable.spec.ts
deleted file mode 100644
index 1c178233de..0000000000
--- a/examples/sites/demos/pc/app/modal/esc-closable.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('按 Esc 键关闭弹出框', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#esc-closable')
-
- const modal = page.locator('.tiny-modal.type__alert.active')
- await page.getByRole('button', { name: '按 Esc 键可以关闭弹出框' }).click()
- await page.keyboard.press('Escape')
- await expect(modal).not.toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/modal/esc-closable.vue b/examples/sites/demos/pc/app/modal/esc-closable.vue
deleted file mode 100644
index b7d206edb2..0000000000
--- a/examples/sites/demos/pc/app/modal/esc-closable.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-
- 按 Esc 键可以关闭弹出框
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/event-composition-api.vue b/examples/sites/demos/pc/app/modal/event-composition-api.vue
deleted file mode 100644
index ee078130d2..0000000000
--- a/examples/sites/demos/pc/app/modal/event-composition-api.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-
- 最大化显示
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/fullscreen.spec.ts b/examples/sites/demos/pc/app/modal/fullscreen.spec.ts
deleted file mode 100644
index 815e6bd143..0000000000
--- a/examples/sites/demos/pc/app/modal/fullscreen.spec.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('最大化显示', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#fullscreen')
-
- const modal = page.locator('.tiny-modal.active')
- await page.getByRole('button', { name: '最大化显示' }).click()
- await expect(modal).toHaveClass(/is__maximize/)
- await page.locator('.tiny-modal__close-btn').click()
- await expect(modal).not.toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/modal/fullscreen.vue b/examples/sites/demos/pc/app/modal/fullscreen.vue
deleted file mode 100644
index 6a505d8799..0000000000
--- a/examples/sites/demos/pc/app/modal/fullscreen.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-
- 最大化显示
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/id-composition-api.vue b/examples/sites/demos/pc/app/modal/id-composition-api.vue
deleted file mode 100644
index fdc8e13a7d..0000000000
--- a/examples/sites/demos/pc/app/modal/id-composition-api.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
- 不允许重复点击
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/id.spec.ts b/examples/sites/demos/pc/app/modal/id.spec.ts
deleted file mode 100644
index 271819ea8e..0000000000
--- a/examples/sites/demos/pc/app/modal/id.spec.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('防止重复提示', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#id')
-
- const demo = page.locator('#id')
-
- await demo.getByRole('button', { name: '不允许重复点击' }).click()
- await demo.getByRole('button', { name: '不允许重复点击' }).click()
- await demo.getByRole('button', { name: '不允许重复点击' }).click()
- await expect(page.locator('.tiny-modal')).toHaveCount(1)
-})
diff --git a/examples/sites/demos/pc/app/modal/id.vue b/examples/sites/demos/pc/app/modal/id.vue
deleted file mode 100644
index 057f88bd46..0000000000
--- a/examples/sites/demos/pc/app/modal/id.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-
- 不允许重复点击
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/is-form-reset-composition-api.vue b/examples/sites/demos/pc/app/modal/is-form-reset-composition-api.vue
deleted file mode 100644
index a225922c4f..0000000000
--- a/examples/sites/demos/pc/app/modal/is-form-reset-composition-api.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-
- 不锁住滚动条不要遮罩层
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/lock-scroll.spec.ts b/examples/sites/demos/pc/app/modal/lock-scroll.spec.ts
deleted file mode 100644
index 8ec6b7b671..0000000000
--- a/examples/sites/demos/pc/app/modal/lock-scroll.spec.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('锁住滚动条', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#lock-scroll')
-
- const modal = page.locator('.tiny-modal.active')
- await page.getByRole('button', { name: '不锁住滚动条不要遮罩层' }).click()
- await expect(modal).not.toHaveClass(/lock__scroll/)
-
- // 上下滑动模态框内容
- const { y: initY } = await modal.locator('.tiny-modal__box').boundingBox()
- await page.mouse.wheel(0, 100)
- await page.waitForTimeout(100)
- const { y: afterY } = await modal.locator('.tiny-modal__box').boundingBox()
- expect(afterY).toBeLessThan(initY)
-})
diff --git a/examples/sites/demos/pc/app/modal/lock-scroll.vue b/examples/sites/demos/pc/app/modal/lock-scroll.vue
deleted file mode 100644
index 8b29aab6fd..0000000000
--- a/examples/sites/demos/pc/app/modal/lock-scroll.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-
- 不锁住滚动条不要遮罩层
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/lock-view-composition-api.vue b/examples/sites/demos/pc/app/modal/lock-view-composition-api.vue
deleted file mode 100644
index f8c679a099..0000000000
--- a/examples/sites/demos/pc/app/modal/lock-view-composition-api.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-
- 不锁界面 且 隐藏遮罩层
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/lock-view.spec.ts b/examples/sites/demos/pc/app/modal/lock-view.spec.ts
deleted file mode 100644
index dd5d63fb99..0000000000
--- a/examples/sites/demos/pc/app/modal/lock-view.spec.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('锁住页面', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#lock-view')
-
- const modal = page.locator('.tiny-modal.active')
-
- // 新版示例页单示例无滚动条，先展开代码保证有滚动条
- await page.locator('.i-ti-code').click()
- await page.waitForTimeout(100)
-
- await page.getByRole('button', { name: '不锁界面 且 隐藏遮罩层' }).click()
- await expect(modal).not.toHaveClass(/lock__view/)
-
- // 检查页面元素是否随鼠标滑轮滚动而移动
- const { y: initY } = await page.locator('#lock-view').boundingBox()
- await page.mouse.wheel(0, 100)
- await page.waitForTimeout(100)
- const { y: afterY } = await page.locator('#lock-view').boundingBox()
- expect(initY).toBeGreaterThan(afterY)
-})
-
-test('控制遮罩层显示', async ({ page }) => {
- await page.goto('modal#lock-view')
-
- const modal = page.locator('.tiny-modal.active')
- await page.getByRole('button', { name: '不锁界面 且 隐藏遮罩层' }).click()
- await expect(modal).not.toHaveClass(/is__mask/)
-})
diff --git a/examples/sites/demos/pc/app/modal/lock-view.vue b/examples/sites/demos/pc/app/modal/lock-view.vue
deleted file mode 100644
index 6a3cca329b..0000000000
--- a/examples/sites/demos/pc/app/modal/lock-view.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-
- 不锁界面 且 隐藏遮罩层
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/mask-closable-composition-api.vue b/examples/sites/demos/pc/app/modal/mask-closable-composition-api.vue
deleted file mode 100644
index 106198f382..0000000000
--- a/examples/sites/demos/pc/app/modal/mask-closable-composition-api.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
- 点击遮罩层可以关闭
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/mask-closable.spec.ts b/examples/sites/demos/pc/app/modal/mask-closable.spec.ts
deleted file mode 100644
index bec5307284..0000000000
--- a/examples/sites/demos/pc/app/modal/mask-closable.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('点击遮罩层关闭窗口', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#mask-closable')
-
- await page.getByRole('button', { name: '点击遮罩层可以关闭' }).click()
- await expect(page.locator('.tiny-modal.active')).toBeVisible()
- await page.mouse.click(10, 10)
- await expect(page.locator('.tiny-modal.active')).not.toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/modal/mask-closable.vue b/examples/sites/demos/pc/app/modal/mask-closable.vue
deleted file mode 100644
index 41f708f3d7..0000000000
--- a/examples/sites/demos/pc/app/modal/mask-closable.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-
- 点击遮罩层可以关闭
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/message-closable.spec.ts b/examples/sites/demos/pc/app/modal/message-closable.spec.ts
deleted file mode 100644
index 68f4f816dd..0000000000
--- a/examples/sites/demos/pc/app/modal/message-closable.spec.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('关闭消息弹窗', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#message-closable')
-
- const demo = page.locator('#message-closable')
- const modal = page.locator('.tiny-modal.active')
-
- await demo.getByRole('button', { name: '关闭按钮示例' }).click()
- await expect(modal.locator('.tiny-modal__close-btn')).toBeVisible()
- await modal.locator('.tiny-modal__close-btn').click()
- await expect(modal).not.toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/modal/message-close-composition-api.vue b/examples/sites/demos/pc/app/modal/message-close-composition-api.vue
new file mode 100644
index 0000000000..eba35f6c48
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/message-close-composition-api.vue
@@ -0,0 +1,26 @@
+
+ 自定义提示框的内容
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/message-event-composition-api.vue b/examples/sites/demos/pc/app/modal/message-event-composition-api.vue
new file mode 100644
index 0000000000..928ef8cc13
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/message-event-composition-api.vue
@@ -0,0 +1,37 @@
+
+ 自定义提示框的内容
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/min-width-height-composition-api.vue b/examples/sites/demos/pc/app/modal/min-width-height-composition-api.vue
deleted file mode 100644
index 3ba93000df..0000000000
--- a/examples/sites/demos/pc/app/modal/min-width-height-composition-api.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-
- 最小宽高度
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/min-width-height.spec.ts b/examples/sites/demos/pc/app/modal/min-width-height.spec.ts
deleted file mode 100644
index c191c496b7..0000000000
--- a/examples/sites/demos/pc/app/modal/min-width-height.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('调整窗口后显示的最小宽高度', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#min-width-height')
-
- await page.getByRole('button', { name: /最小宽高度/ }).click()
- const modal = page.locator('.tiny-modal.active .tiny-modal__box')
- // 获取弹窗位置
- const { x, y } = await modal.boundingBox()
- // 开始横线拖动
- await page.mouse.move(x, y)
- await page.mouse.down()
- await page.mouse.move(x + 100, y)
- await page.mouse.move(x + 300, y)
- await page.mouse.up()
-
- // 判断窗口宽度是否小于限定最小宽度
- const { width } = await modal.boundingBox()
- expect(Math.round(width)).not.toBeLessThan(700)
-})
diff --git a/examples/sites/demos/pc/app/modal/min-width-height.vue b/examples/sites/demos/pc/app/modal/min-width-height.vue
deleted file mode 100644
index 9db925f5b9..0000000000
--- a/examples/sites/demos/pc/app/modal/min-width-height.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-
- 最小宽高度
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/modal-event-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-event-composition-api.vue
new file mode 100644
index 0000000000..36ba3dcb1a
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-event-composition-api.vue
@@ -0,0 +1,86 @@
+
+ 打开提示框
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/prop-slots.spec.ts b/examples/sites/demos/pc/app/modal/prop-slots.spec.ts
deleted file mode 100644
index 76a0d9c029..0000000000
--- a/examples/sites/demos/pc/app/modal/prop-slots.spec.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('调整窗口后显示的最小宽度', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#prop-slots')
- await page.getByRole('button', { name: '打开提示框' }).click()
- await page.getByRole('button', { name: '点我确定' }).click()
- await page.getByRole('button', { name: '打开提示框' }).click()
- await page.getByRole('button', { name: '点我取消' }).click()
-})
diff --git a/examples/sites/demos/pc/app/modal/prop-slots.vue b/examples/sites/demos/pc/app/modal/prop-slots.vue
deleted file mode 100644
index 0390c81d03..0000000000
--- a/examples/sites/demos/pc/app/modal/prop-slots.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-
- 打开提示框
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/resize-composition-api.vue b/examples/sites/demos/pc/app/modal/resize-composition-api.vue
deleted file mode 100644
index 16e0376910..0000000000
--- a/examples/sites/demos/pc/app/modal/resize-composition-api.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-
- 可以拖动调整窗口大小
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/resize.spec.ts b/examples/sites/demos/pc/app/modal/resize.spec.ts
deleted file mode 100644
index 57e135b086..0000000000
--- a/examples/sites/demos/pc/app/modal/resize.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('调整窗口大小', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#resize')
-
- await page.getByRole('button', { name: '可以拖动调整窗口大小' }).click()
- const modal = page.locator('.tiny-modal.active .tiny-modal__box')
-
- // 获取弹窗位置
- const { x, y, width, height } = await modal.boundingBox()
-
- // 开始拖动放大
- await page.mouse.move(x, y)
- await page.mouse.down()
- await page.mouse.move(x + 100, y + 100)
- await page.mouse.move(x - 50, y)
- await expect(modal).toHaveClass(/is__drag/)
- await page.mouse.up()
-
- // 判断窗口尺寸是否放大
- const { width: finalWidth, height: finalHeight } = await modal.boundingBox()
- expect(width).toBeLessThan(finalWidth)
- expect(height).toBeLessThan(finalHeight)
-})
diff --git a/examples/sites/demos/pc/app/modal/resize.vue b/examples/sites/demos/pc/app/modal/resize.vue
deleted file mode 100644
index ec68fa0165..0000000000
--- a/examples/sites/demos/pc/app/modal/resize.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-
- 可以拖动调整窗口大小
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/show-header-footer-composition-api.vue b/examples/sites/demos/pc/app/modal/show-header-footer-composition-api.vue
deleted file mode 100644
index 694ab6283c..0000000000
--- a/examples/sites/demos/pc/app/modal/show-header-footer-composition-api.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
- 控制显示头部及底部
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/show-header-footer.spec.ts b/examples/sites/demos/pc/app/modal/show-header-footer.spec.ts
deleted file mode 100644
index 60c77943fe..0000000000
--- a/examples/sites/demos/pc/app/modal/show-header-footer.spec.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('控制显示头部及底部', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#show-header-footer')
-
- const modal = page.locator('.tiny-modal.active')
- await page.getByRole('button', { name: /控制显示头部及底部/ }).click()
- await expect(modal.locator('.tiny-modal__header')).toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/modal/show-header-footer.vue b/examples/sites/demos/pc/app/modal/show-header-footer.vue
deleted file mode 100644
index 188b9709bc..0000000000
--- a/examples/sites/demos/pc/app/modal/show-header-footer.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-
- 控制显示头部及底部
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/status-composition-api.vue b/examples/sites/demos/pc/app/modal/status-composition-api.vue
index 43038dc4cd..73341a4284 100644
--- a/examples/sites/demos/pc/app/modal/status-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/status-composition-api.vue
@@ -1,33 +1,93 @@
-
点击增加改变颜色
-
-
- 点击增加改变颜色
-
-
-
-
+
@@ -13,7 +28,14 @@ import { Button, Modal, Notify } from '@opentiny/vue'
export default {
components: {
- TinyButton: Button
+ TinyButton: Button,
+ TinyModal: Modal
+ },
+ data() {
+ return {
+ show1: false,
+ show2: false
+ }
},
methods: {
baseClick() {
@@ -23,9 +45,6 @@ export default {
successClick() {
Modal.alert({ message: '成功提示框', status: 'success' })
},
- errorClick() {
- Modal.alert({ message: '失败提示框', title: '错误提示', status: 'error' })
- },
confirmClick() {
Modal.confirm('您确定要删除吗？').then((res) => {
Notify({
@@ -45,7 +64,21 @@ export default {
),
status: 'success'
})
+ },
+ messageClick() {
+ Modal.message('简单的消息')
}
}
}
+
+
diff --git a/examples/sites/demos/pc/app/modal/default-grid-composition-api.vue b/examples/sites/demos/pc/app/modal/default-grid-composition-api.vue
deleted file mode 100644
index 2022c3ff57..0000000000
--- a/examples/sites/demos/pc/app/modal/default-grid-composition-api.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-
- 函数式调用
+
+ 弹窗模式：
+ 基本提示框
+ 成功提示框
+ 确认提示框
+ 支持传入 jsx 提示框
+
+
+ 消息模式：
+ 消息提示
+
+
+ 标签式调用
+
+
+
+ 打开弹窗1
+ 打开弹窗2
+
- 默认插槽
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/default-grid.spec.ts b/examples/sites/demos/pc/app/modal/default-grid.spec.ts
deleted file mode 100644
index e92cc9ef3d..0000000000
--- a/examples/sites/demos/pc/app/modal/default-grid.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('嵌套grid', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#default-grid')
-
- const modal = page.locator('.tiny-modal')
- const grid = modal.locator('.tiny-grid ').first()
- await page.getByRole('button', { name: /默认插槽/ }).click()
- await expect(grid).toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/modal/default-grid.vue b/examples/sites/demos/pc/app/modal/default-grid.vue
deleted file mode 100644
index b3c1f9d238..0000000000
--- a/examples/sites/demos/pc/app/modal/default-grid.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-
- test
-
- 默认插槽
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/duration-composition-api.vue b/examples/sites/demos/pc/app/modal/duration-composition-api.vue
deleted file mode 100644
index 507730c578..0000000000
--- a/examples/sites/demos/pc/app/modal/duration-composition-api.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-
- test
-
- 默认 3000ms 后自动关闭提示框
- 500ms 后自动关闭提示框
- 5000ms 后自动关闭提示框
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/duration.spec.ts b/examples/sites/demos/pc/app/modal/duration.spec.ts
deleted file mode 100644
index a8e8d435cb..0000000000
--- a/examples/sites/demos/pc/app/modal/duration.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('自动关闭延时', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#duration')
-
- const modal = page.locator('.tiny-modal.type__message')
- await page.getByRole('button', { name: /3000ms/ }).click()
- await expect(modal).toBeVisible()
- await page.waitForTimeout(3200)
- const visible1 = await modal.isVisible()
- expect(visible1).toEqual(false)
-
- await page.getByRole('button', { name: /500ms/ }).click()
- await expect(modal).toBeVisible()
- await page.waitForTimeout(700)
- const visible2 = await modal.isVisible()
- expect(visible2).toEqual(false)
-
- await page.getByRole('button', { name: /5000ms/ }).click()
- await expect(modal).toBeVisible()
- const visible3 = await modal.isVisible()
- expect(visible3).toEqual(true)
-})
diff --git a/examples/sites/demos/pc/app/modal/duration.vue b/examples/sites/demos/pc/app/modal/duration.vue
deleted file mode 100644
index 8c669789c3..0000000000
--- a/examples/sites/demos/pc/app/modal/duration.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
- 默认3000ms 后自动关闭提示框
- 500ms 后自动关闭提示框
- 5000ms 后自动关闭提示框
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/esc-closable-composition-api.vue b/examples/sites/demos/pc/app/modal/esc-closable-composition-api.vue
deleted file mode 100644
index ed7388cd36..0000000000
--- a/examples/sites/demos/pc/app/modal/esc-closable-composition-api.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
- 显示、关闭事件
- 确认、取消事件
- 关闭点击事件
- 缩放事件
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/event.spec.ts b/examples/sites/demos/pc/app/modal/event.spec.ts
deleted file mode 100644
index c0ec904eeb..0000000000
--- a/examples/sites/demos/pc/app/modal/event.spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('事件', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#event')
-
- const demo = page.locator('#event')
- const messageModal = page.locator('.tiny-modal.type__message')
- const modal = page.locator('.tiny-modal.type__confirm.active')
-
- // 显示、关闭事件
- await demo.getByRole('button', { name: '显示、关闭事件' }).click()
- await expect(modal).toBeVisible()
- await expect(messageModal.getByText('show 事件触发了')).toBeVisible()
- await modal.getByRole('button', { name: '确定' }).click()
- await expect(modal).not.toBeVisible()
- await expect(messageModal.getByText('show 事件触发了')).toBeVisible()
-
- // 确认、取消事件
- await demo.getByRole('button', { name: '确认、取消事件' }).click()
- await expect(modal).toBeVisible()
- await modal.getByRole('button', { name: '确定' }).click()
- await expect(modal).not.toBeVisible()
- await expect(messageModal.getByText('confirm 事件触发了')).toBeVisible()
- await demo.getByRole('button', { name: '确认、取消事件' }).click()
- await expect(modal).toBeVisible()
- await modal.getByRole('button', { name: '取消' }).click()
- await expect(modal).not.toBeVisible()
- await expect(messageModal.getByText('cancel 事件触发了')).toBeVisible()
-
- // 关闭点击事件
- await demo.getByRole('button', { name: '关闭点击事件' }).click()
- await modal.locator('.tiny-modal__close-btn').click()
- await expect(messageModal.getByText('close 事件触发了')).toBeVisible()
- await expect(modal).not.toBeVisible()
-
- // 缩放事件
- await demo.getByRole('button', { name: '缩放事件' }).click()
- await modal.locator('.tiny-modal__zoom-btn').click()
- await expect(messageModal.getByText('zoom 事件触发了')).toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/modal/event.vue b/examples/sites/demos/pc/app/modal/event.vue
deleted file mode 100644
index e43df53f2f..0000000000
--- a/examples/sites/demos/pc/app/modal/event.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-
- 显示、关闭事件
-确认、取消事件
-关闭点击事件
-缩放事件
-
- 显示、关闭事件
- 确认、取消事件
- 关闭点击事件
- 缩放事件
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/footer-btn-content-composition-api.vue b/examples/sites/demos/pc/app/modal/footer-btn-content-composition-api.vue
deleted file mode 100644
index cda2e57214..0000000000
--- a/examples/sites/demos/pc/app/modal/footer-btn-content-composition-api.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-
- 显示、关闭事件
-确认、取消事件
-关闭点击事件
-缩放事件
-
- 方法调用
- 组件形式使用
-
-
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/footer-btn-content.spec.ts b/examples/sites/demos/pc/app/modal/footer-btn-content.spec.ts
deleted file mode 100644
index b07a477837..0000000000
--- a/examples/sites/demos/pc/app/modal/footer-btn-content.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('自定义确定按钮文本', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#footer-btn-content')
-
- const demo = page.locator('#footer-btn-content')
- const modal = page.locator('.tiny-modal.active')
- const confirmBtn = modal.locator('.tiny-modal__footer .tiny-button--primary')
- const cancelBtn = modal.locator('.tiny-modal__footer .tiny-button--default')
-
- await demo.getByRole('button', { name: '方法调用' }).click()
- await expect(confirmBtn).toHaveText('好的')
- await expect(cancelBtn).toHaveText('返回')
- await confirmBtn.click()
-
- await demo.getByRole('button', { name: '组件形式使用' }).click()
- await expect(confirmBtn).toHaveText('确定')
- await expect(cancelBtn).toHaveText('再想想')
- await confirmBtn.click()
-})
diff --git a/examples/sites/demos/pc/app/modal/footer-btn-content.vue b/examples/sites/demos/pc/app/modal/footer-btn-content.vue
deleted file mode 100644
index a2bec8495f..0000000000
--- a/examples/sites/demos/pc/app/modal/footer-btn-content.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-
- 设置确定按钮和取消按钮文本
-
- 方法调用
- 组件形式使用
-
-
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/footer-btn-props-composition-api.vue b/examples/sites/demos/pc/app/modal/footer-btn-props-composition-api.vue
deleted file mode 100644
index 808a46e2ab..0000000000
--- a/examples/sites/demos/pc/app/modal/footer-btn-props-composition-api.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-
- 设置确定按钮和取消按钮文本
-
- 方法调用
- 组件形式使用
-
-
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/footer-btn-props.spec.ts b/examples/sites/demos/pc/app/modal/footer-btn-props.spec.ts
deleted file mode 100644
index 0351e26abb..0000000000
--- a/examples/sites/demos/pc/app/modal/footer-btn-props.spec.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test.describe('自定义底部按钮', () => {
- test('确认按钮Props', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#footer-btn-props')
-
- const modal = page.locator('.tiny-modal')
- const confirmBtn1 = modal.locator('.tiny-modal__footer .tiny-button--primary').nth(1)
- const confirmBtn2 = modal.locator('.tiny-modal__footer .tiny-button--primary').first()
-
- await page.getByRole('button', { name: '方法调用' }).click()
- await expect(confirmBtn1).toHaveClass(/is-disabled/)
- await expect(confirmBtn1).toHaveText('OK')
- await modal.locator('.tiny-modal__header > .tiny-modal__close-btn').nth(1).click()
-
- await page.getByRole('button', { name: '组件形式使用' }).click()
- await expect(confirmBtn2).toHaveAttribute('autoFocus', 'true')
- })
-
- test('取消按钮Props', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#footer-btn-props')
-
- const modal = page.locator('.tiny-modal')
- const cancelBtn1 = modal.locator('.tiny-modal__footer .tiny-button--default').first()
- const cancelBtn2 = modal.getByRole('button', { name: '取消' })
-
- await page.getByRole('button', { name: '方法调用' }).click()
- await expect(cancelBtn1).toHaveClass(/is-plain/)
- await expect(cancelBtn1).toHaveText('返回')
- await modal.locator('.tiny-modal__header > .tiny-modal__close-btn').nth(1).click()
-
- await page.getByRole('button', { name: '组件形式使用' }).click()
- await expect(cancelBtn2).toHaveClass(/tiny-button--warning/)
- })
-})
diff --git a/examples/sites/demos/pc/app/modal/footer-btn-props.vue b/examples/sites/demos/pc/app/modal/footer-btn-props.vue
deleted file mode 100644
index b62a7767b2..0000000000
--- a/examples/sites/demos/pc/app/modal/footer-btn-props.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-
- 自定义确定按钮和取消按钮Props
-
- 方法调用
- 组件形式使用
-
-
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/footer-slot-composition-api.vue b/examples/sites/demos/pc/app/modal/footer-slot-composition-api.vue
deleted file mode 100644
index 0730703e0a..0000000000
--- a/examples/sites/demos/pc/app/modal/footer-slot-composition-api.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-
- 自定义确定按钮和取消按钮Props
-
- 自定义底部
-
-
- 自定义底部信息
-
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/footer-slot.spec.ts b/examples/sites/demos/pc/app/modal/footer-slot.spec.ts
deleted file mode 100644
index 774d3d2b2d..0000000000
--- a/examples/sites/demos/pc/app/modal/footer-slot.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('底部插槽', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#footer-slot')
-
- const modal = page.locator('.tiny-modal')
- await page.getByRole('button', { name: /自定义底部/ }).click()
- await expect(modal.getByRole('button', { name: /自定义底部信息/ })).toBeVisible()
- await modal.getByRole('button', { name: /自定义底部信息/ }).click()
-})
diff --git a/examples/sites/demos/pc/app/modal/footer-slot.vue b/examples/sites/demos/pc/app/modal/footer-slot.vue
deleted file mode 100644
index 48e162ca85..0000000000
--- a/examples/sites/demos/pc/app/modal/footer-slot.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
- 自定义底部
-
-
- 自定义底部信息
-
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/fullscreen-composition-api.vue b/examples/sites/demos/pc/app/modal/fullscreen-composition-api.vue
deleted file mode 100644
index 829c91af8b..0000000000
--- a/examples/sites/demos/pc/app/modal/fullscreen-composition-api.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
- 关闭是否重置表单
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/is-form-reset.spec.ts b/examples/sites/demos/pc/app/modal/is-form-reset.spec.ts
deleted file mode 100644
index da39ebe00a..0000000000
--- a/examples/sites/demos/pc/app/modal/is-form-reset.spec.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('关闭弹窗，是否重置表单数据', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#is-form-reset')
-
- const demo = page.locator('#is-form-reset')
- const modal = page.locator('.tiny-modal.active')
-
- await demo.getByRole('button', { name: '关闭是否重置表单' }).click()
- await modal.locator('form input[type="text"]').click()
- await modal.locator('form input[type="text"]').fill('name')
- await modal.locator('input[type="password"]').click()
- await modal.locator('input[type="password"]').fill('123')
- await modal.getByRole('button', { name: '取消' }).click()
- await demo.getByRole('button', { name: '关闭是否重置表单' }).click()
- await expect(modal.locator('form input[type="text"]')).toHaveValue('name')
- await expect(modal.locator('input[type="password"]')).toHaveValue('123')
-})
diff --git a/examples/sites/demos/pc/app/modal/is-form-reset.vue b/examples/sites/demos/pc/app/modal/is-form-reset.vue
deleted file mode 100644
index aebef4b488..0000000000
--- a/examples/sites/demos/pc/app/modal/is-form-reset.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
- 关闭是否重置表单
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/lock-scroll-composition-api.vue b/examples/sites/demos/pc/app/modal/lock-scroll-composition-api.vue
deleted file mode 100644
index 29b0ada350..0000000000
--- a/examples/sites/demos/pc/app/modal/lock-scroll-composition-api.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/message-close.vue b/examples/sites/demos/pc/app/modal/message-close.vue
new file mode 100644
index 0000000000..a61177fb65
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/message-close.vue
@@ -0,0 +1,33 @@
+
+
+ 消息可关闭
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/message-composition-api.vue b/examples/sites/demos/pc/app/modal/message-composition-api.vue
deleted file mode 100644
index 3231929788..0000000000
--- a/examples/sites/demos/pc/app/modal/message-composition-api.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
+ 消息可关闭
+
+
+ 打开带事件消息
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/message-event.vue b/examples/sites/demos/pc/app/modal/message-event.vue
new file mode 100644
index 0000000000..126dd2b129
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/message-event.vue
@@ -0,0 +1,46 @@
+
+
+ 打开带事件消息
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/message-id-composition-api.vue b/examples/sites/demos/pc/app/modal/message-id-composition-api.vue
new file mode 100644
index 0000000000..5f9d4aedba
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/message-id-composition-api.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/message-id.vue b/examples/sites/demos/pc/app/modal/message-id.vue
new file mode 100644
index 0000000000..81b0a3d8a8
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/message-id.vue
@@ -0,0 +1,32 @@
+
+
+ 重复点击不出现多个
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/message-top-composition-api.vue b/examples/sites/demos/pc/app/modal/message-top-composition-api.vue
new file mode 100644
index 0000000000..28f47d53b1
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/message-top-composition-api.vue
@@ -0,0 +1,25 @@
+
+
+ 重复点击不出现多个
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/message-top.vue b/examples/sites/demos/pc/app/modal/message-top.vue
new file mode 100644
index 0000000000..3f614ef3be
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/message-top.vue
@@ -0,0 +1,32 @@
+
+
+ 消息距离顶部500px
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/message.spec.ts b/examples/sites/demos/pc/app/modal/message.spec.ts
deleted file mode 100644
index 1984a47413..0000000000
--- a/examples/sites/demos/pc/app/modal/message.spec.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('自定义内容', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#message')
-
- const modal = page.locator('.tiny-modal.active')
- await page.getByRole('button', { name: '自定义提示框的内容' }).click()
- await expect(modal.locator('.tiny-modal__content').getByText('11111')).toHaveCSS('color', 'rgb(250, 152, 65)')
-})
diff --git a/examples/sites/demos/pc/app/modal/message.vue b/examples/sites/demos/pc/app/modal/message.vue
deleted file mode 100644
index 0a6e89792f..0000000000
--- a/examples/sites/demos/pc/app/modal/message.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
+ 消息距离顶部500px
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-event.vue b/examples/sites/demos/pc/app/modal/modal-event.vue
new file mode 100644
index 0000000000..eaaccc5d24
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-event.vue
@@ -0,0 +1,96 @@
+
+ 函数式调用
+
+ 打开带事件弹窗
+
+ 标签式调用
+
+ 打开带事件弹窗
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-fn-slots-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-fn-slots-composition-api.vue
new file mode 100644
index 0000000000..1f368900a5
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-fn-slots-composition-api.vue
@@ -0,0 +1,64 @@
+
+ 函数式调用
+
+ 打开带事件弹窗
+
+ 标签式调用
+
+ 打开带事件弹窗
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-fn-slots.vue b/examples/sites/demos/pc/app/modal/modal-fn-slots.vue
new file mode 100644
index 0000000000..4a3d4d7f72
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-fn-slots.vue
@@ -0,0 +1,72 @@
+
+ 函数式调用
+
+ 打开带插槽弹窗
+
+ 标签式调用
+
+ 打开带插槽弹窗
+
+ 使用默认插槽
+
+ 记录最近事项
+ 取消
+ 保存
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-footer-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-footer-composition-api.vue
new file mode 100644
index 0000000000..66b9708cb2
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-footer-composition-api.vue
@@ -0,0 +1,69 @@
+
+ 函数式调用
+
+ 打开带插槽弹窗
+
+ 标签式调用
+
+ 打开带插槽弹窗
+
+ 使用默认插槽
+
+ 记录最近事项
+ 取消
+ 保存
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-footer.vue b/examples/sites/demos/pc/app/modal/modal-footer.vue
new file mode 100644
index 0000000000..3706362236
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-footer.vue
@@ -0,0 +1,85 @@
+
+ 函数式调用
+
+ 自定义弹窗底部
+
+ 标签式调用
+
+ 自定义弹窗底部
+
+
+
+ #foot 插槽
+
+ 自定义弹窗底部
+
+
+ 返回
+ 保存
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-header-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-header-composition-api.vue
new file mode 100644
index 0000000000..a4d81c2c8e
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-header-composition-api.vue
@@ -0,0 +1,40 @@
+
+ 函数式调用
+
+ 自定义弹窗底部
+
+ 标签式调用
+
+ 自定义弹窗底部
+
+
+
+ #foot 插槽
+
+ 自定义弹窗底部
+
+
+ 返回
+ 保存
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-header.vue b/examples/sites/demos/pc/app/modal/modal-header.vue
new file mode 100644
index 0000000000..0820c67393
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-header.vue
@@ -0,0 +1,48 @@
+
+ 函数式调用
+
+ 自定义弹窗标题
+
+ 标签式调用
+
+ 自定义弹窗标题
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-lock-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-lock-composition-api.vue
new file mode 100644
index 0000000000..abe6ac1af6
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-lock-composition-api.vue
@@ -0,0 +1,78 @@
+
+ 函数式调用
+
+ 自定义弹窗标题
+
+ 标签式调用
+
+ 自定义弹窗标题
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-lock.vue b/examples/sites/demos/pc/app/modal/modal-lock.vue
new file mode 100644
index 0000000000..ac5e070fed
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-lock.vue
@@ -0,0 +1,87 @@
+
+ 需要为body添加滚动条之后，再验证锁定功能
+
+ 添加滚动条
+ 还原滚动条
+
+ 函数式调用
+
+ 仅锁定滚动条
+ 仅锁定住页面
+
+ 标签式调用
+
+ 仅锁定滚动条
+ 仅锁定住页面
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-mask-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-mask-composition-api.vue
new file mode 100644
index 0000000000..43797fd544
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-mask-composition-api.vue
@@ -0,0 +1,59 @@
+
+ 需要为body添加滚动条之后，再验证锁定功能
+
+ 添加滚动条
+ 还原滚动条
+
+ 函数式调用
+
+ 仅锁定滚动条
+ 仅锁定住页面
+
+ 标签式调用
+
+ 仅锁定滚动条
+ 仅锁定住页面
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-mask.vue b/examples/sites/demos/pc/app/modal/modal-mask.vue
new file mode 100644
index 0000000000..2ac758e5f1
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-mask.vue
@@ -0,0 +1,67 @@
+
+ 函数式调用
+
+ 弹窗遮罩层
+
+ 标签式调用
+
+ 弹窗遮罩层
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-other-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-other-composition-api.vue
new file mode 100644
index 0000000000..d252274632
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-other-composition-api.vue
@@ -0,0 +1,77 @@
+
+ 函数式调用
+
+ 弹窗遮罩层
+
+ 标签式调用
+
+ 弹窗遮罩层
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-other.vue b/examples/sites/demos/pc/app/modal/modal-other.vue
new file mode 100644
index 0000000000..4c509fb989
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-other.vue
@@ -0,0 +1,83 @@
+
+ 函数式调用
+
+ 弹窗esc关闭
+
+ 标签式调用
+
+ 弹窗esc关闭,保留表单数据
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-resize-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-resize-composition-api.vue
new file mode 100644
index 0000000000..e83e8f81df
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-resize-composition-api.vue
@@ -0,0 +1,62 @@
+
+ 函数式调用
+
+ 弹窗esc关闭
+
+ 标签式调用
+
+ 弹窗esc关闭,保留表单数据
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-resize.vue b/examples/sites/demos/pc/app/modal/modal-resize.vue
new file mode 100644
index 0000000000..1dfde4f9b7
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-resize.vue
@@ -0,0 +1,71 @@
+
+ 函数式调用
+
+ 自定义弹窗调整大小
+
+ 标签式调用
+
+ 自定义调整弹窗大小
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-size-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-size-composition-api.vue
new file mode 100644
index 0000000000..1f232c6e1c
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-size-composition-api.vue
@@ -0,0 +1,68 @@
+
+ 函数式调用
+
+ 自定义弹窗调整大小
+
+ 标签式调用
+
+ 自定义调整弹窗大小
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/modal-size.vue b/examples/sites/demos/pc/app/modal/modal-size.vue
new file mode 100644
index 0000000000..c2856b07b6
--- /dev/null
+++ b/examples/sites/demos/pc/app/modal/modal-size.vue
@@ -0,0 +1,76 @@
+
+ 函数式调用
+
+ 自定义弹窗大小
+ 弹窗全屏
+
+ 标签式调用
+
+ 自定义弹窗大小
+ 弹窗全屏
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/prop-slots-composition-api.vue b/examples/sites/demos/pc/app/modal/prop-slots-composition-api.vue
deleted file mode 100644
index d8c1eb2c22..0000000000
--- a/examples/sites/demos/pc/app/modal/prop-slots-composition-api.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-
- 函数式调用
+
+ 自定义弹窗大小
+ 弹窗全屏
+
+ 标签式调用
+
+ 自定义弹窗大小
+ 弹窗全屏
+
+
+
+
- 基本提示图标
- 成功提示图标
- 警告提示图标
- 错误提示图标
- 加载提示图标
+
-
@@ -23,7 +23,7 @@ export default {
},
data() {
return {
- percentage: 90,
+ percentage: 45,
IconMinus: iconMinus(),
IconPlus: iconPlus()
}
diff --git a/examples/sites/demos/pc/app/progress/custom-color-composition-api.vue b/examples/sites/demos/pc/app/progress/custom-color-composition-api.vue
index a9c6d4f053..b35cce88a3 100644
--- a/examples/sites/demos/pc/app/progress/custom-color-composition-api.vue
+++ b/examples/sites/demos/pc/app/progress/custom-color-composition-api.vue
@@ -1,11 +1,11 @@
+
+
+
diff --git a/examples/sites/demos/pc/app/modal/status.spec.ts b/examples/sites/demos/pc/app/modal/status.spec.ts
deleted file mode 100644
index 03ae6aff0c..0000000000
--- a/examples/sites/demos/pc/app/modal/status.spec.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('消息状态', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#status')
-
- const messageInfo = page.locator('.tiny-modal').filter({ hasText: '基本提示图标' })
- await page.getByRole('button', { name: '基本提示图标' }).click()
- await expect(messageInfo).toHaveClass(/type__message/)
- await expect(messageInfo).toHaveClass(/status__info/)
- await expect(messageInfo.locator('.tiny-modal__status-wrapper .tiny-svg')).toHaveClass(/tiny-modal-svg__info/)
-
- const messageSucc = page.locator('.tiny-modal').filter({ hasText: '成功提示图标' })
- await page.getByRole('button', { name: '成功提示图标' }).click()
- await expect(messageSucc).toHaveClass(/status__success/)
- await expect(messageSucc.locator('.tiny-modal__status-wrapper .tiny-svg')).toHaveClass(/tiny-modal-svg__success/)
-
- const messageWarn = page.locator('.tiny-modal').filter({ hasText: '警告提示图标' })
- await page.getByRole('button', { name: '警告提示图标' }).click()
- await expect(messageWarn).toHaveClass(/status__warning/)
- await expect(messageWarn.locator('.tiny-modal__status-wrapper .tiny-svg')).toHaveClass(/tiny-modal-svg__warning/)
-
- const messageError = page.locator('.tiny-modal').filter({ hasText: '错误提示图标' })
- await page.getByRole('button', { name: '错误提示图标' }).click()
- await expect(messageError).toHaveClass(/status__error/)
- await expect(messageError.locator('.tiny-modal__status-wrapper .tiny-svg')).toHaveClass(/tiny-modal-svg__error/)
-
- const messageHasLoadingBtn = page.locator('.tiny-modal').filter({ hasText: '加载提示图标' })
- const loadingBtn = messageHasLoadingBtn.locator('.tiny-modal-svg__refresh')
- await page.getByRole('button', { name: '加载提示图标' }).click()
- await expect(loadingBtn).toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/modal/status.vue b/examples/sites/demos/pc/app/modal/status.vue
index cbbf183e98..a17454cba7 100644
--- a/examples/sites/demos/pc/app/modal/status.vue
+++ b/examples/sites/demos/pc/app/modal/status.vue
@@ -1,10 +1,30 @@
- 模态窗状态：
+
+ 信息提示图标
+ 成功提示图标
+ 警告提示图标
+ 错误提示图标
+ 加载提示图标
+
+ 消息状态：
+
+ 信息提示图标
+ 成功提示图标
+ 警告提示图标
+ 错误提示图标
+ 加载提示图标
+
+ 标签式调用：
+
+ 信息提示图标
+ 成功提示图标
+ 警告提示图标
+ 错误提示图标
+ 加载提示图标
+
+
- 基本提示图标
- 成功提示图标
- 警告提示图标
- 错误提示图标
- 加载提示图标
+ 自定义标题
- 无标题
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/title.spec.ts b/examples/sites/demos/pc/app/modal/title.spec.ts
deleted file mode 100644
index 69d222d4ab..0000000000
--- a/examples/sites/demos/pc/app/modal/title.spec.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('自定义标题', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#title')
-
- const modal = page.locator('.tiny-modal.active')
- await page.getByRole('button', { name: '自定义标题' }).click()
- await expect(modal.locator('.tiny-modal__header')).toHaveText('自定义标题')
-})
-
-test('无标题', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#title')
-
- const modal = page.locator('.tiny-modal.active')
- await page.getByRole('button', { name: '无标题' }).click()
- await expect(modal.locator('.tiny-modal__title')).not.toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/modal/title.vue b/examples/sites/demos/pc/app/modal/title.vue
deleted file mode 100644
index 733a146283..0000000000
--- a/examples/sites/demos/pc/app/modal/title.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-
- 自定义标题
- 无标题
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/top-composition-api.vue b/examples/sites/demos/pc/app/modal/top-composition-api.vue
deleted file mode 100644
index a0e6227faf..0000000000
--- a/examples/sites/demos/pc/app/modal/top-composition-api.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
- 距离顶部的位置为500 px
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/top.spec.ts b/examples/sites/demos/pc/app/modal/top.spec.ts
deleted file mode 100644
index 4d9afdf67c..0000000000
--- a/examples/sites/demos/pc/app/modal/top.spec.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('距离顶部的位置', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#top')
-
- const modal = page.locator('.tiny-modal.active')
- await page.getByRole('button', { name: '距离顶部的位置为500' }).click()
- await expect(modal).toHaveCSS('top', '500px')
-})
diff --git a/examples/sites/demos/pc/app/modal/top.vue b/examples/sites/demos/pc/app/modal/top.vue
deleted file mode 100644
index 64b1ba3f74..0000000000
--- a/examples/sites/demos/pc/app/modal/top.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-
- 距离顶部的位置为500 px
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/type-composition-api.vue b/examples/sites/demos/pc/app/modal/type-composition-api.vue
deleted file mode 100644
index 08233b64b2..0000000000
--- a/examples/sites/demos/pc/app/modal/type-composition-api.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
+
+
+ 通过
+ `, + 'en-US': ` + Use the
+ Set the title of the window through the
+ ` + }, + codeFiles: ['modal-header.vue'] }, { - demoId: 'message', + demoId: 'modal-footer', name: { - 'zh-CN': '自定义内容', - 'en-US': 'Custom Content' + 'zh-CN': '自定义弹窗底部', + 'en-US': 'Custom modal bottom' }, desc: { - 'zh-CN': '
+ 通过
+ 通过
+ 通过
+ 通过
+ `, + 'en-US': ` + Use the
+ Modify the confirmation button text by using the
+ The
+ Use the
+ Completely customize the bottom content via the
+ ` + }, + codeFiles: ['modal-footer.vue'] }, + { - demoId: 'footer-btn-content', + demoId: 'modal-size', name: { - 'zh-CN': '自定义底部按钮内容', - 'en-US': 'Custom Bottom Button Content' + 'zh-CN': '弹窗大小/全屏', + 'en-US': 'Size control' }, desc: { - 'zh-CN': - '
+ 通过
+ Use the
+ 当
+
+ `, + 'en-US': ` + With the
+ When the
+ The
+ ` + }, + codeFiles: ['modal-resize.vue'] }, { - demoId: 'resize', + demoId: 'modal-mask', name: { - 'zh-CN': '调整窗口大小', - 'en-US': 'Resize The Window' + 'zh-CN': '弹窗的遮罩层', + 'en-US': 'Modal mask' }, desc: { - 'zh-CN': - '
+ 通过
+ `, + 'en-US': ` + The
+ You can use the
+ ` + }, + codeFiles: ['modal-mask.vue'] }, { - demoId: 'min-width-height', + demoId: 'modal-lock', name: { - 'zh-CN': '调整窗口后的最小宽高度', - 'en-US': 'Minimum width and height after adjusting the window' + 'zh-CN': '弹窗的锁定', + 'en-US': 'Modal lock' }, desc: { - 'zh-CN': - '
+ 通过
+
+ Using the
+
+ 通过
+ 通过
+ `, + 'en-US': ` + The
+ You can set a custom stack order using the
+ You can use the
+ ` + }, + codeFiles: ['modal-other.vue'] }, { - demoId: 'status', + demoId: 'modal-event', name: { - 'zh-CN': '消息状态', - 'en-US': 'Position From The Top' + 'zh-CN': '弹窗的事件', + 'en-US': 'Modal event' }, desc: { - 'zh-CN': - '
+ 当窗口关闭时，会触发
+ 当点击确定按钮时，会触发
+ 当点击取消按钮时，会触发
+ 当点击关闭按钮时，会触发
+ 当窗口缩放时，会触发
+
is triggered + When the window closes, the
is triggered + When the OK button is clicked, the
is triggered. + When the cancel button is clicked, the
is triggered. + When the close button is clicked, the
is triggered. + When the window is scaled, the
is triggered. +
+ 在函数式使用时，通过
+
+ When used functionally, you can pass in the corresponding slot via the
+
+ When used functionally, you can pass in the corresponding slot via the
+
+ 通过
+ `, + 'en-US': ` + Messages can be manually closed by setting the
+ The
+ ` + }, + codeFiles: ['message-close.vue'] }, { - demoId: 'top', + demoId: 'message-top', name: { - 'zh-CN': '距离顶部的位置', + 'zh-CN': '消息距离顶部位置', 'en-US': 'Position from top' }, desc: { - 'zh-CN': "
+ 当窗口关闭时，会触发
+ `, + 'en-US': ` + When the window is displayed, the
+ When the window closes, the
+ ` + }, + codeFiles: ['message-event.vue'] } ] } diff --git a/examples/sites/demos/pc/app/modal/z-index-composition-api.vue b/examples/sites/demos/pc/app/modal/z-index-composition-api.vue deleted file mode 100644 index b90bac4d6d..0000000000 --- a/examples/sites/demos/pc/app/modal/z-index-composition-api.vue +++ /dev/null @@ -1,11 +0,0 @@ - -z-index 的值为500
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/z-index.spec.ts b/examples/sites/demos/pc/app/modal/z-index.spec.ts
deleted file mode 100644
index b1c8857eae..0000000000
--- a/examples/sites/demos/pc/app/modal/z-index.spec.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('自定义z-index', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#z-index')
-
- const modal = page.locator('.tiny-modal.active')
- await page.getByRole('button', { name: /z-index/ }).click()
- await expect(modal).toHaveCSS('z-index', '500')
-})
diff --git a/examples/sites/demos/pc/app/modal/z-index.vue b/examples/sites/demos/pc/app/modal/z-index.vue
deleted file mode 100644
index 102e7bc4b5..0000000000
--- a/examples/sites/demos/pc/app/modal/z-index.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-
- z-index 的值为500
-
-
-
diff --git a/examples/sites/demos/pc/app/notify/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/notify/basic-usage-composition-api.vue
index 4143d3aea2..f95257b018 100644
--- a/examples/sites/demos/pc/app/notify/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/basic-usage-composition-api.vue
@@ -1,6 +1,7 @@
弹出提示框
+ 弹出提示框-jsx
@@ -10,11 +11,24 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
function handleClick() {
Notify({
type: 'info',
- title: (h, params) =>
弹出提示框
+ 弹出提示框-jsx
@@ -15,12 +16,24 @@ export default {
handleClick() {
Notify({
type: 'info',
- title: (h, params) =>
+ 通过
+ 通过
+
+ Set the title of the notification box with the
+ Set the contents of the notification box with the
+
-
@@ -17,7 +17,7 @@ import { ref } from 'vue'
import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
import { iconMinus, iconPlus } from '@opentiny/vue-icon'
-const percentage = ref(90)
+const percentage = ref(45)
const IconMinus = iconMinus()
const IconPlus = iconPlus()
diff --git a/examples/sites/demos/pc/app/progress/basic-usage.spec.ts b/examples/sites/demos/pc/app/progress/basic-usage.spec.ts
index 7ed4557082..fbfa18d5b3 100644
--- a/examples/sites/demos/pc/app/progress/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/progress/basic-usage.spec.ts
@@ -12,18 +12,24 @@ test('基础用法，是否可动态控制进度条', async ({ page }) => {
await expect(progress1).toBeVisible()
await expect(progress2).toBeVisible()
await expect(progress1).toHaveCSS('height', '4px')
- await expect(progress2).toHaveCSS('height', '24px')
+ await expect(progress2).toHaveCSS('height', '12px')
await expect(progress1).toHaveCSS('border-radius', '2px')
- await expect(progress2).toHaveCSS('border-radius', '12px')
- await expect(page.getByText('90%')).toHaveCount(2)
+ await expect(progress2).toHaveCSS('border-radius', '6px')
+ await expect(page.getByText('45%')).toHaveCount(2)
await expect(page.getByText('努力加载中，请稍后...')).toBeVisible()
- await expect(progress.nth(0)).toHaveAttribute('aria-valuenow', '90')
- await expect(progress.nth(1)).toHaveAttribute('aria-valuenow', '90')
+ await expect(progress.nth(0)).toHaveAttribute('aria-valuenow', '45')
+ await expect(progress.nth(1)).toHaveAttribute('aria-valuenow', '45')
+ await demo.getByRole('button').nth(1).click()
+ await expect(progress.nth(0)).toHaveAttribute('aria-valuenow', '55')
+ await expect(progress.nth(1)).toHaveAttribute('aria-valuenow', '55')
+ await demo.getByRole('button').nth(1).click()
+ await demo.getByRole('button').nth(1).click()
+ await demo.getByRole('button').nth(1).click()
+ await demo.getByRole('button').nth(1).click()
+ await demo.getByRole('button').nth(1).click()
await demo.getByRole('button').nth(1).click()
await expect(page.getByText('努力加载中，请稍后...')).not.toBeVisible()
- await expect(progress.nth(0)).toHaveAttribute('aria-valuenow', '100')
- await expect(progress.nth(1)).toHaveAttribute('aria-valuenow', '100')
await demo.getByRole('button').first().click()
await expect(progress.nth(0)).toHaveAttribute('aria-valuenow', '90')
await expect(progress.nth(1)).toHaveAttribute('aria-valuenow', '90')
diff --git a/examples/sites/demos/pc/app/progress/basic-usage.vue b/examples/sites/demos/pc/app/progress/basic-usage.vue
index 7efc845136..0e4ca84c5f 100644
--- a/examples/sites/demos/pc/app/progress/basic-usage.vue
+++ b/examples/sites/demos/pc/app/progress/basic-usage.vue
@@ -7,7 +7,7 @@
+
@@ -13,24 +33,67 @@ import { Button, Modal } from '@opentiny/vue'
export default {
components: {
- TinyButton: Button
+ TinyButton: Button,
+ TinyModal: Modal
+ },
+ data() {
+ return {
+ show: false,
+ status: ''
+ }
},
methods: {
- baseClick() {
- Modal.message({ message: '基本提示图标', status: 'info' })
+ infoClick(mode) {
+ mode === 1 && Modal.alert({ message: '基本提示图标', status: 'info' })
+ mode === 2 && Modal.message({ message: '基本提示图标', status: 'info' })
+ if (mode === 3) {
+ this.status = 'info'
+ this.show = true
+ }
},
- successClick() {
- Modal.message({ message: '成功提示图标', status: 'success' })
+ successClick(mode) {
+ mode === 1 && Modal.alert({ message: '成功提示图标', status: 'success' })
+ mode === 2 && Modal.message({ message: '成功提示图标', status: 'success' })
+ if (mode === 3) {
+ this.status = 'success'
+ this.show = true
+ }
},
- warningClick() {
- Modal.message({ message: '警告提示图标', status: 'warning' })
+ warningClick(mode) {
+ mode === 1 && Modal.alert({ message: '警告提示图标', status: 'warning' })
+ mode === 2 && Modal.message({ message: '警告提示图标', status: 'warning' })
+ if (mode === 3) {
+ this.status = 'warning'
+ this.show = true
+ }
},
- errorClick() {
- Modal.message({ message: '错误提示图标', status: 'error' })
+ errorClick(mode) {
+ mode === 1 && Modal.alert({ message: '错误提示图标', status: 'error' })
+ mode === 2 && Modal.message({ message: '错误提示图标', status: 'error' })
+ if (mode === 3) {
+ this.status = 'error'
+ this.show = true
+ }
},
- loadingClick() {
- Modal.message({ message: '加载提示图标', status: 'loading' })
+ loadingClick(mode) {
+ mode === 1 && Modal.alert({ message: '加载提示图标', status: 'loading' })
+ mode === 2 && Modal.message({ message: '加载提示图标', status: 'loading' })
+ if (mode === 3) {
+ this.status = 'loading'
+ this.show = true
+ }
}
}
}
+
+
diff --git a/examples/sites/demos/pc/app/modal/title-composition-api.vue b/examples/sites/demos/pc/app/modal/title-composition-api.vue
deleted file mode 100644
index b399cf825f..0000000000
--- a/examples/sites/demos/pc/app/modal/title-composition-api.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-
- 模态窗状态：
+
+ 信息提示图标
+ 成功提示图标
+ 警告提示图标
+ 错误提示图标
+ 加载提示图标
+
+ 消息状态：
+
+ 信息提示图标
+ 成功提示图标
+ 警告提示图标
+ 错误提示图标
+ 加载提示图标
+
+ 标签式调用：
+
+ 信息提示图标
+ 成功提示图标
+ 警告提示图标
+ 错误提示图标
+ 加载提示图标
+
+
- alert 弹框
- message 提示框
- confirm 确认提示框
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/type.spec.ts b/examples/sites/demos/pc/app/modal/type.spec.ts
deleted file mode 100644
index 59d2ec5628..0000000000
--- a/examples/sites/demos/pc/app/modal/type.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('窗口类型', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#type')
-
- const alert = page.locator('.tiny-modal').filter({ hasText: 'alert 弹框' })
- await page.getByRole('button', { name: 'alert 弹框' }).click()
- await expect(alert).toBeVisible()
- await expect(alert).toHaveClass(/type__alert/)
- await page.getByRole('button', { name: '确定', exact: true }).click()
-
- const message = page.locator('.tiny-modal').filter({ hasText: 'message 提示框' })
- await page.getByRole('button', { name: 'message 提示框' }).click()
- await expect(message).toBeVisible()
- await expect(message).toHaveClass(/type__message/)
-
- const confirm = page.locator('.tiny-modal').filter({ hasText: '确定框' })
- await page.getByRole('button', { name: 'confirm 确认提示框' }).click()
- await expect(confirm).toBeVisible()
- await expect(confirm).toHaveClass(/type__confirm/)
-})
diff --git a/examples/sites/demos/pc/app/modal/type.vue b/examples/sites/demos/pc/app/modal/type.vue
deleted file mode 100644
index bf1c21f2a1..0000000000
--- a/examples/sites/demos/pc/app/modal/type.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
- alert 弹框
- message 提示框
- confirm 确认提示框
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/value-composition-api.vue b/examples/sites/demos/pc/app/modal/value-composition-api.vue
deleted file mode 100644
index 77fb84862c..0000000000
--- a/examples/sites/demos/pc/app/modal/value-composition-api.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
- 默认插槽
-
-
-
-
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/value.spec.ts b/examples/sites/demos/pc/app/modal/value.spec.ts
deleted file mode 100644
index b030c09fa5..0000000000
--- a/examples/sites/demos/pc/app/modal/value.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('控制弹窗显示隐藏的绑定值', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('modal#value')
-
- const modal = page.locator('.tiny-modal.active')
- await page.getByRole('button', { name: '默认插槽' }).click()
- await expect(modal).toHaveClass(/is__visible/)
- await expect(modal).toBeVisible()
- await expect(modal.locator('.custom-content')).toHaveText('test')
- await expect(modal.locator('.custom-content')).toHaveCSS('color', 'rgb(49, 104, 241)')
- await page.getByRole('button', { name: '确定' }).click()
- await expect(modal).not.toHaveClass(/is__visible/)
- await expect(modal).not.toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/modal/value.vue b/examples/sites/demos/pc/app/modal/value.vue
deleted file mode 100644
index 76141d2205..0000000000
--- a/examples/sites/demos/pc/app/modal/value.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-
- test
- -
- 默认插槽
-
-
-
-
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/modal/webdoc/modal.cn.md b/examples/sites/demos/pc/app/modal/webdoc/modal.cn.md
index cd6fc0fb49..a5ad7891f9 100644
--- a/examples/sites/demos/pc/app/modal/webdoc/modal.cn.md
+++ b/examples/sites/demos/pc/app/modal/webdoc/modal.cn.md
@@ -4,4 +4,4 @@ title: Modal 模态框
# Modal 模态框
-test
- -模态对话框。
+模态对话框和消息提示。
diff --git a/examples/sites/demos/pc/app/modal/webdoc/modal.en.md b/examples/sites/demos/pc/app/modal/webdoc/modal.en.md
index 4ae58eb35e..2e051b684b 100644
--- a/examples/sites/demos/pc/app/modal/webdoc/modal.en.md
+++ b/examples/sites/demos/pc/app/modal/webdoc/modal.en.md
@@ -1,7 +1,7 @@
---
-title: Modal dialog box
+title: Modal
---
-# Modal dialog box
+# Modal
-Modal dialog box.
+Modal and messages.
diff --git a/examples/sites/demos/pc/app/modal/webdoc/modal.js b/examples/sites/demos/pc/app/modal/webdoc/modal.js
index 0c0d6a41d2..13c639dcd4 100644
--- a/examples/sites/demos/pc/app/modal/webdoc/modal.js
+++ b/examples/sites/demos/pc/app/modal/webdoc/modal.js
@@ -9,334 +9,333 @@ export default {
'en-US': 'Basic Usage'
},
desc: {
- 'zh-CN':
- '可通过Modal.alert方法设置弹出框，Modal.confirm方法设置确认弹出框。函数返回一个Promise对象，其中属性vm可用来关闭当前模态框。
You can use the Modal.alert method to set a pop-up box, and use the Modal.confirm method to set a confirmation pop-up box. The function returns a Promise object, where the property vm can be used to close the current Modal.
Modal 组件有2种调用方法：函数式调用和标签式调用。 +
+
+ 函数入参：支持
+ 函数返回：返回值为一个
+
+ 函数式调用
+ 通过调用Modal对象下的 alert、confirm、message方法调用弹窗组件。 + 函数入参：支持
(message:string, title:string, options: Object) 或 (options: Object) 两种形式。
+ 其中 options 对象支持Modal 组件的部分属性值,比如 message, title, status 等。 + 函数返回：返回值为一个
Promise对象，其中属性vm可用来关闭当前模态框+
+
+ 标签式调用
+Modal 对象自身也是一个标准的Vue 组件，通过modelValue 属性控制弹窗的显示和隐藏。
+
+
+ 2、消息模式和模态窗模式很多属性不共用，比如消息模式就不支持
+ `,
+ 'en-US': `
+ The 特别提示：
+ 1、message 的消息模式，只支持函数式调用。+ 2、消息模式和模态窗模式很多属性不共用，比如消息模式就不支持
title 等属性。
+ Modal component has two calls: the function call and the tag call . +
+
+ Function entry: Support
+ Function return: The return value is a
+
+
+ Function call
+ You can do this by calling thealert, confirm, and message methods under the Modal object. + Function entry: Support
(message:string, title:string, options: Object) or (options: Object) two forms.
+ The options object supports some property values of the Modal component, such as message, title, status and so on. + Function return: The return value is a
Promise object where the property vm can be used to close the current mode box +
+
+
+ Tag call
+ TheModal object itself is also a standard Vue component that controls the display and hiding of pop-ups through the modelValue property.
+
+
+ 2, message mode and mode window mode many attributes do not share, for example, message mode does not support
+`
},
codeFiles: ['basic-usage.vue']
},
{
- demoId: 'fullscreen',
- name: {
- 'zh-CN': '最大化显示',
- 'en-US': 'Maximized Display'
- },
- desc: {
- 'zh-CN': 'Special note:
+ 1,message message mode, only support functional call. + 2, message mode and mode window mode many attributes do not share, for example, message mode does not support
title and other attributes.
+ 可通过fullscreen属性设置是否最大化显示。
You can use the fullscreen attribute to set whether to maximize the display.
可通过esc-closable属性设置是否允许按 Esc 键关闭窗口。
You can use the esc-closable attribute to set whether to close a window by pressing the Esc key.
可通过duration属性设置自动关闭的延迟时间，仅当type='message'有效。
You can use the duration attribute to set the delay time for automatic closing. This parameter is valid only for type=message.
可通过id设置防止重复提示，仅当type='message'有效。
If you do not want to click the window repeatedly, you can set a unique id to prevent repeated prompts. This parameter is valid only for type=message.
可通过lock-scroll属性设置是否锁住滚动条，不允许页面滚动。
You can use the lock-scroll attribute to set whether to lock the scroll bar.
可通过mask属性设置是否显示遮罩层，lock-view属性设置是否锁住页面，不允许窗口之外的任何操作。
status属性设置组件状态，可选值有info、success、warning、error、loading，每种状态有相应的状态图标。',
'en-US':
- 'You can set whether to display the mask layer through themaskattribute, and whether to lock the page and not allow any operations outside the window through thelock-viewattribute'
+ 'Use the status property to set the component state, Optional values are info, success, warning, error, and loading. Each state has a corresponding status icon.'
},
- codeFiles: ['lock-view.vue']
+ codeFiles: ['status.vue']
},
+
{
- demoId: 'mask-closable',
+ demoId: 'modal-header',
name: {
- 'zh-CN': '点击遮罩层关闭窗口',
- 'en-US': 'Click The Mask Layer To Close The Window.'
+ 'zh-CN': '自定义弹窗标题',
+ 'en-US': 'Custom Modal title'
},
desc: {
- 'zh-CN': '可通过mask-closable属性设置是否允许点击遮罩层关闭窗口。
You can use the mask-closable attribute to set whether to allow clicking the mask layer to close the window.
show-header属性，设置是否显示头部。默认值为：true+ 通过
title属性，设置窗口的标题。+ `, + 'en-US': ` + Use the
show-header property to set whether to display headers. The default value is true+ Set the title of the window through the
title property. + ` + }, + codeFiles: ['modal-header.vue'] }, { - demoId: 'message', + demoId: 'modal-footer', name: { - 'zh-CN': '自定义内容', - 'en-US': 'Custom Content' + 'zh-CN': '自定义弹窗底部', + 'en-US': 'Custom modal bottom' }, desc: { - 'zh-CN': '
可通过message属性设置窗口的内容。
You can set the content of the window through the :message attribute.
show-footer属性设置是否显示底部。默认值为：false + 通过
confirm-content属性，修改确认按钮文字；cancel-content属性，修改取消按钮文字。+ 通过
confirm-btn-props属性，修改确认按钮的属性；cancel-btn-props属性，修改取消按钮的属性。+ 通过
footerDragable属性，让底部也支持拖动（默认只有标题栏可拖动）。默认值为：false+ 通过
#footer插槽，完全自定义底部内容。+ `, + 'en-US': ` + Use the
show-footer property to set whether the bottom is displayed. The default value is false + Modify the confirmation button text by using the
confirm-content property; The cancer-content property modifies the cancel button text. + The
confirm-btn-props property is used to modify the properties of the confirm button. cancer-btn-props property to modify the properties of the cancel button. + Use the
footerDragable property to make the bottom also dragable (by default, only the title bar can be dragged). The default value is false+ Completely customize the bottom content via the
#footer slot. + ` + }, + codeFiles: ['modal-footer.vue'] }, + { - demoId: 'footer-btn-content', + demoId: 'modal-size', name: { - 'zh-CN': '自定义底部按钮内容', - 'en-US': 'Custom Bottom Button Content' + 'zh-CN': '弹窗大小/全屏', + 'en-US': 'Size control' }, desc: { - 'zh-CN': - '
可通过confirm-content属性设置确认按钮内容，cancel-content属性设置取消按钮内容。
\n', - 'en-US': - '
Set the content of the confirm button throughconfirm-content, and set the content of the cancel button through:cancel-content.
width属性，设置初始宽度，height属性设置初始高度，+ 通过
fullscreen属性，设置是否最大化显示。默认值为：false
+ `,
+ 'en-US': `
+ Use the width property to set the width, and the height property to set the height, + Use the
fullscreen property to set whether to maximize the display.
+ `
+ },
+ codeFiles: ['modal-size.vue']
},
{
- demoId: 'footer-btn-props',
+ demoId: 'modal-resize',
name: {
- 'zh-CN': '自定义底部按钮',
- 'en-US': 'Customize Bottom Button'
+ 'zh-CN': '弹窗调整大小',
+ 'en-US': 'Size control'
},
desc: {
- 'zh-CN':
- '可通过confirm-btn-props属性设置确认按钮，cancel-btn-props属性设置取消按钮。
\n', - 'en-US': - '
Set the confirmation button via :confirm-btn-props and the cancel button via :cancel-btn-props.
resize属性，设置是否允许拖动边框调整窗口大小，并且右上角显示切换最大化的按钮。+ 当
resize属性设置为true后，通过 min-height属性设置拖拽后窗口的最小高度,默认值为 200.+
min-width属性设置拖拽后窗口的最小宽度,默认值为 340。+ `, + 'en-US': ` + With the
resize property, set whether to allow dragging the border to resize the window, and the upper right corner shows a button to maximize the switch. + When the
resize property is set to true, use the min-height property to set the minimum height of the drag-and-drop window. The default is 200.+ The
min-width property sets the minimum width of the drag-and-drop window. The default value is 340. + ` + }, + codeFiles: ['modal-resize.vue'] }, { - demoId: 'resize', + demoId: 'modal-mask', name: { - 'zh-CN': '调整窗口大小', - 'en-US': 'Resize The Window' + 'zh-CN': '弹窗的遮罩层', + 'en-US': 'Modal mask' }, desc: { - 'zh-CN': - '
可通过width属性设置宽度，height属性设置高度，resize属性设置是否允许拖动调整窗口大小。
Use width to set the width, height to set the height, and resize to set whether to allow dragging to resize the window.
mask属性,设置是否显示遮罩层。默认值为true + 通过
mask-closable属性,设置是否允许点击遮罩层关闭窗口。默认值为false+ `, + 'en-US': ` + The
mask property can be used to set whether the mask layer is displayed. The default value is true + You can use the
mask-closable property to set whether to allow clicking on the mask layer to close the window. The default value is false+ ` + }, + codeFiles: ['modal-mask.vue'] }, { - demoId: 'min-width-height', + demoId: 'modal-lock', name: { - 'zh-CN': '调整窗口后的最小宽高度', - 'en-US': 'Minimum width and height after adjusting the window' + 'zh-CN': '弹窗的锁定', + 'en-US': 'Modal lock' }, desc: { - 'zh-CN': - '
可通过resize属性设置可拖拽属性为true后，min-height属性设置拖拽后窗口的最小高度，min-width属性设置拖拽后窗口的最小宽度。
resizeproperty can be used to set the drag property totrue. Themin-heightproperty sets the minimum height of the window after dragging, and themin-widthproperty sets the minimum width of the window after dragging.'
- },
- codeFiles: ['min-width-height.vue']
+ 'zh-CN': `
+ 通过lock-scroll属性,设置是否锁住滚动条，不允许页面滚动。默认值为false+ 通过
lock-view属性,设置是否锁住页面，不允许窗口之外的任何操作。默认值为true+
+
+
+
+ `,
+ 'en-US': `
+ Use the 锁住滚动条 是指锁定body元素上的滚动条，仅当body有滚动条时，才有效果。+
锁住页面 是指鼠标不能操作蒙层下面的元素。+
lock-scroll property to set whether to lock the scroll bar to prevent page scrolling. The default value is false+ Using the
lock-view property, you can set whether to lock the page and not allow any operations outside the window. The default value is true+
+
+
+ `
+ },
+ codeFiles: ['modal-lock.vue']
},
+
{
- demoId: 'show-header-footer',
+ demoId: 'modal-other',
name: {
- 'zh-CN': '控制显示头部及底部',
- 'en-US': 'Do Not Display Header and Bottom'
+ 'zh-CN': '弹窗的其它特性',
+ 'en-US': 'Other features of modal'
},
desc: {
- 'zh-CN':
- ' locks the scrollbar means to lock the scrollbar on the body element. This only works if the body has a scrollbar.
+ Locks the page means that the mouse cannot manipulate the elements below the mask. +
可通过show-footer属性设置是否显示底部,show-header属性设置是否显示头部。
show-footerattribute, and whether to display the head through theshow-headerattribute.'
- },
- codeFiles: ['show-header-footer.vue']
+ 'zh-CN': `
+ 通过esc-closable属性设置是否允许按 Esc 键关闭窗口。默认值为false+ 通过
z-index属性设置自定义堆叠顺序。+ 通过
is-form-reset属性，设置关闭弹窗后，是否重置数据。 默认值为true,即关闭弹窗后重置数据。+ `, + 'en-US': ` + The
esc-closable property sets whether to allow the Esc key to close the window. The default value is false+ You can set a custom stack order using the
z-index property. + You can use the
is-form-reset property to set whether data is reset after modal is closed. The default value is true, that is, the data is reset after the modal window is closed. + ` + }, + codeFiles: ['modal-other.vue'] }, { - demoId: 'status', + demoId: 'modal-event', name: { - 'zh-CN': '消息状态', - 'en-US': 'Position From The Top' + 'zh-CN': '弹窗的事件', + 'en-US': 'Modal event' }, desc: { - 'zh-CN': - '
可通过status属性设置消息状态，可选值有info、success、warning、error、loading。
Set the message status throughstatus, with optional values includinginfosuccesswarningerrorloading.
show事件+ 当窗口关闭时，会触发
hide事件+ 当点击确定按钮时，会触发
confirm事件+ 当点击取消按钮时，会触发
cancel事件+ 当点击关闭按钮时，会触发
close事件+ 当窗口缩放时，会触发
zoom事件+
+ 1、
+ 2、函数式调用时，不触发
+
+ `,
+ 'en-US': `
+ When the window is displayed, the type = 'alert' 时，没有cancel事件+ 2、函数式调用时，不触发
close事件+
show event is triggered + When the window closes, the
hide event is triggered + When the OK button is clicked, the
confirm event is triggered. + When the cancel button is clicked, the
cancel event is triggered. + When the close button is clicked, the
close event is triggered. + When the window is scaled, the
zoom event is triggered. +
+ 1. When
+ 2, function call, does not trigger
+
+ `
+ },
+ codeFiles: ['modal-event.vue']
},
{
- demoId: 'message-closable',
+ demoId: 'modal-fn-slots',
name: {
- 'zh-CN': '关闭消息弹窗',
- 'en-US': 'Close Message Pop-Up Window'
+ 'zh-CN': '弹窗的插槽',
+ 'en-US': 'Modal slots'
},
desc: {
- 'zh-CN': 'type = 'alert' , there is no cancel event + 2, function call, does not trigger
close event +
可通过message-closable属性设置消息可手动关闭。
Messages can be closed manually by setting message-closable.
#default , #footer 插槽，标签式时，使用标准的Vue插槽语法即可。+ 在函数式使用时，通过
slots属性，传入相应的插槽。 #footer 插槽的作用域上下文变量有： {$modal, beforeClose,confirm,cancel} 可使用。 +
+ 函数式传入插槽时，由于
+ `,
+ 'en-US': `
+ modal mode has Modal组件是直接挂载到body上，不是在Demo组件内部渲染的，所以jsx引用组件时，要使用引用组件的变量，而不能使用Demo中注册的组件名。详见示例代码
+ #default , #footer slots, and the standard Vue slot syntax can be used for tag mode. + When used functionally, you can pass in the corresponding slot via the
slots attribute. < code > # footer < / code > slot context variables are: the scope of the < code > {$modal, beforeClose, confirm and cancel} < / code >. +
+ When a function is passed into the slot, because the
+ modal mode has Modal component is mounted directly to the body instead of rendering inside the Demo component, when jsx references the component, the variable that references the component should be used. You cannot use the component name registered in Demo. See sample code
+ #default , #footer slots, and the standard Vue slot syntax can be used for tag mode. + When used functionally, you can pass in the corresponding slot via the
slots attribute. < code > # footer < / code > slot context variables are: the scope of the < code > {$modal, beforeClose, confirm and cancel} < / code >. +
+ When a function is passed into the slot, because the
+ `
+ },
+ codeFiles: ['modal-fn-slots.vue']
},
{
- demoId: 'title',
+ demoId: 'message-close',
name: {
- 'zh-CN': '标题',
- 'en-US': 'Title'
+ 'zh-CN': '消息的关闭和延时',
+ 'en-US': 'Closure and delay of messages'
},
desc: {
- 'zh-CN': 'Modal component is mounted directly to the body instead of rendering inside the Demo component, when jsx references the component, the variable that references the component should be used. You cannot use the component name registered in Demo. See sample code
+ 可通过title属性设置窗口的标题。
Set the title of the window viatitle.
message-closable属性设置消息可手动关闭。默认值为false+ 通过
duration属性设置自动关闭的延迟时间,单位为毫秒。默认值为3000 ms+ `, + 'en-US': ` + Messages can be manually closed by setting the
message-closable property. The default value is false+ The
duration property is used to set the automatic shutdown delay in milliseconds. The default value is 3000 ms+ ` + }, + codeFiles: ['message-close.vue'] }, { - demoId: 'top', + demoId: 'message-top', name: { - 'zh-CN': '距离顶部的位置', + 'zh-CN': '消息距离顶部位置', 'en-US': 'Position from top' }, desc: { - 'zh-CN': "
可通过top属性设置消息距离顶部的位置，仅当type='message'有效。
Set the position of the message from the top via top, which is only valid when type='message'.
可通过type属性设置窗口类型。
Set the window type via :type.
可通过modalValue/v-model属性设置绑定值，控制弹窗是否显示。
Bind the value through modalValue/v-model to control whether the pop-up window is displayed.
可通过z-index属性设置自定义堆叠顺序。
Set a custom stacking order via z-index.
可通过is-form-reset属性设置false，关闭弹窗后不重置数据。
By setting theis-form-resetattribute tofalse, the data will not be reset after closing the pop-up window.
可通过#footer插槽设置底部内容。
The bottom content can be set through the #footer slot.'
+ 'zh-CN': '通过top属性设置消息距离顶部的位置,单位为px',
+ 'en-US': `Use the top property to set the distance from the top of the message in units of px. `
},
- codeFiles: ['footer-slot.vue']
+ codeFiles: ['message-top.vue']
},
+
{
- demoId: 'default-grid',
+ demoId: 'message-id',
name: {
- 'zh-CN': '嵌套表格',
- 'en-US': 'Nested Tables'
- },
- desc: {
- 'zh-CN': '
可通过#default插槽设置嵌套表格组件。
#default slot.'
- },
- codeFiles: ['default-grid.vue']
- },
- {
- demoId: 'event',
- name: {
- 'zh-CN': '事件',
- 'en-US': 'event'
+ 'zh-CN': '防止重复消息提示',
+ 'en-US': 'Prevent Repeated Prompts'
},
desc: {
- 'zh-CN':
- '\n 当窗口显示时会触发show事件，关闭时会触发hide事件。
\n 当窗口缩放时会触发zoom事件。
\n 当点击确定按钮时会触发confirm事件，点击取消按钮时触发cancel事件。
\n 当点击关闭按钮时会触发close事件。
\n
id设置防止重复提示。',
+ 'en-US': 'Prevent repeated prompts with the id setting.'
},
- codeFiles: ['event.vue']
+ codeFiles: ['message-id.vue']
},
{
- demoId: 'prop-slots',
+ demoId: 'message-event',
name: {
- 'zh-CN': '函数插槽',
- 'en-US': 'When used functionally, the slot can be set through the `slots` property'
+ 'zh-CN': '消息的事件',
+ 'en-US': 'messeage event'
},
desc: {
- 'zh-CN': '在函数式使用时，可通过slots属性设置插槽。
slots property.'
- },
- codeFiles: ['prop-slots.vue']
+ 'zh-CN': `
+ 当窗口显示时，会触发show事件+ 当窗口关闭时，会触发
hide事件+ `, + 'en-US': ` + When the window is displayed, the
show event is triggered + When the window closes, the
hide event is triggered + ` + }, + codeFiles: ['message-event.vue'] } ] } diff --git a/examples/sites/demos/pc/app/modal/z-index-composition-api.vue b/examples/sites/demos/pc/app/modal/z-index-composition-api.vue deleted file mode 100644 index b90bac4d6d..0000000000 --- a/examples/sites/demos/pc/app/modal/z-index-composition-api.vue +++ /dev/null @@ -1,11 +0,0 @@ - -
通知消息的标题
, + title: '通知消息的标题', message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', position: 'top-right', duration: 5000, customClass: 'my-custom-cls' }) } + +function handleClickJxs() { + Notify({ + type: 'info', + title: () =>通知消息的标题
, + message: () => ( + 通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文 + ), + position: 'top-right', + duration: 5000, + customClass: 'my-custom-cls' + }) +} diff --git a/examples/sites/demos/pc/app/notify/basic-usage.spec.ts b/examples/sites/demos/pc/app/notify/basic-usage.spec.ts index 0a5cc39737..1958724326 100644 --- a/examples/sites/demos/pc/app/notify/basic-usage.spec.ts +++ b/examples/sites/demos/pc/app/notify/basic-usage.spec.ts @@ -3,10 +3,11 @@ import { test, expect } from '@playwright/test' test('基本用法', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) await page.goto('notify#basic-usage') - await page.getByRole('button', { name: '弹出提示框' }).click() + const status = page.locator('.tiny-notify__icon-status') + + await page.getByRole('button', { name: '弹出提示框' }).first().click() await expect(status).toBeVisible() - await expect(page.getByRole('heading', { name: '通知消息的标题' })).toBeVisible() await expect( page.getByText('通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文') ).toBeVisible() diff --git a/examples/sites/demos/pc/app/notify/basic-usage.vue b/examples/sites/demos/pc/app/notify/basic-usage.vue index 770985ae4c..e89b701d57 100644 --- a/examples/sites/demos/pc/app/notify/basic-usage.vue +++ b/examples/sites/demos/pc/app/notify/basic-usage.vue @@ -1,6 +1,7 @@通知消息的标题
, + title: '通知消息的标题', message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', position: 'top-right', duration: 5000, customClass: 'my-custom-cls' }) + }, + handleClickJxs() { + Notify({ + type: 'info', + title: () =>通知消息的标题
, + message: () => ( + 通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文 + ), + position: 'top-right', + duration: 5000, + customClass: 'my-custom-cls' + }) } } } diff --git a/examples/sites/demos/pc/app/notify/debounceDelay-composition-api.vue b/examples/sites/demos/pc/app/notify/debounceDelay-composition-api.vue index 58c37f2cbe..47487235db 100644 --- a/examples/sites/demos/pc/app/notify/debounceDelay-composition-api.vue +++ b/examples/sites/demos/pc/app/notify/debounceDelay-composition-api.vue @@ -11,7 +11,7 @@ import { Notify, Button as TinyButton } from '@opentiny/vue' const handleClick = ref( Notify({ type: 'info', - title: (h, params) =>通知消息的标题
, + title: '通知消息的标题', message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', position: 'top-right', duration: 1000, diff --git a/examples/sites/demos/pc/app/notify/debounceDelay.vue b/examples/sites/demos/pc/app/notify/debounceDelay.vue index 733d28484a..2148a39f1c 100644 --- a/examples/sites/demos/pc/app/notify/debounceDelay.vue +++ b/examples/sites/demos/pc/app/notify/debounceDelay.vue @@ -15,7 +15,7 @@ export default { return { handleClick: Notify({ type: 'info', - title: (h, params) =>通知消息的标题
, + title: '通知消息的标题', message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', position: 'top-right', duration: 1000, diff --git a/examples/sites/demos/pc/app/notify/duration-composition-api.vue b/examples/sites/demos/pc/app/notify/duration-composition-api.vue index ee4382594d..868b4f28ec 100644 --- a/examples/sites/demos/pc/app/notify/duration-composition-api.vue +++ b/examples/sites/demos/pc/app/notify/duration-composition-api.vue @@ -1,6 +1,5 @@
- 默认4500 ms后自动关闭提示框
500ms后自动关闭提示框
5000ms后自动关闭提示框
@@ -9,19 +8,10 @@
diff --git a/examples/sites/demos/pc/app/notify/message.spec.ts b/examples/sites/demos/pc/app/notify/message.spec.ts
deleted file mode 100644
index 05c23253e2..0000000000
--- a/examples/sites/demos/pc/app/notify/message.spec.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('自定义内容', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('notify#message')
- await page.getByRole('button', { name: '自定义内容' }).click()
- const content = await page.getByRole('paragraph').filter({ hasText: '自定义内容' })
- await expect(content).toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/notify/message.vue b/examples/sites/demos/pc/app/notify/message.vue
deleted file mode 100644
index a3b13b7979..0000000000
--- a/examples/sites/demos/pc/app/notify/message.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
- 自定义内容
-
-
-
-
diff --git a/examples/sites/demos/pc/app/notify/notify-events-composition-api.vue b/examples/sites/demos/pc/app/notify/notify-events-composition-api.vue
index 37e8570166..9e8f4a6fd0 100644
--- a/examples/sites/demos/pc/app/notify/notify-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/notify-events-composition-api.vue
@@ -17,7 +17,6 @@ function baseClick() {
Modal.message({ message: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框', status: 'info' })
return false
},
- duration: 500000,
position: 'top-right'
})
}
@@ -28,7 +27,6 @@ function baseClick2() {
title: '通知',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
onClose: () => Modal.message({ message: '点击关闭按钮时触发事件', status: 'info' }),
- duration: 500000,
position: 'top-right'
})
}
diff --git a/examples/sites/demos/pc/app/notify/notify-events.vue b/examples/sites/demos/pc/app/notify/notify-events.vue
index 5d91abd2d3..4a26e394cc 100644
--- a/examples/sites/demos/pc/app/notify/notify-events.vue
+++ b/examples/sites/demos/pc/app/notify/notify-events.vue
@@ -22,7 +22,6 @@ export default {
Modal.message({ message: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框', status: 'info' })
return false
},
- duration: 500000,
position: 'top-right'
})
},
@@ -32,7 +31,6 @@ export default {
title: '通知',
message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
onClose: () => Modal.message({ message: '点击关闭按钮时触发事件', status: 'info' }),
- duration: 500000,
position: 'top-right'
})
}
diff --git a/examples/sites/demos/pc/app/notify/position-composition-api.vue b/examples/sites/demos/pc/app/notify/position-composition-api.vue
index 0e2dce48d1..cb366cdef4 100644
--- a/examples/sites/demos/pc/app/notify/position-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/position-composition-api.vue
@@ -1,26 +1,28 @@
- 默认 bottom-right
- top-right
+ top-left
+ top-right
+
+
+bottom-left
+ bottom-right
-
+
+
diff --git a/examples/sites/demos/pc/app/notify/position.spec.ts b/examples/sites/demos/pc/app/notify/position.spec.ts
index ff79ae6e4a..6b192ccd6b 100644
--- a/examples/sites/demos/pc/app/notify/position.spec.ts
+++ b/examples/sites/demos/pc/app/notify/position.spec.ts
@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
test('显示位置', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('notify#position')
- await page.getByRole('button', { name: '默认 bottom-right' }).click()
+ await page.getByRole('button', { name: 'bottom-right' }).click()
await page.getByRole('button', { name: 'top-right' }).click()
const bottom = page.locator('.bottom-right')
const bottomBox = await bottom.boundingBox()
diff --git a/examples/sites/demos/pc/app/notify/position.vue b/examples/sites/demos/pc/app/notify/position.vue
index 1cc4715e27..849d790ae1 100644
--- a/examples/sites/demos/pc/app/notify/position.vue
+++ b/examples/sites/demos/pc/app/notify/position.vue
@@ -1,11 +1,15 @@
+
+
- 默认 bottom-right
- top-right
+ top-left
+ top-right
+
+
+bottom-left
+ bottom-right
-
+
+
diff --git a/examples/sites/demos/pc/app/notify/showClose-composition-api.vue b/examples/sites/demos/pc/app/notify/showClose-composition-api.vue
index 640ce8f51a..36ebe6bcea 100644
--- a/examples/sites/demos/pc/app/notify/showClose-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/showClose-composition-api.vue
@@ -10,11 +10,10 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
function baseClick() {
Notify({
type: 'info',
- title: (h, params) => +
+
通知消息的标题
, + title: '通知消息的标题', message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', showClose: false, - position: 'top-right', - duration: 500000 + position: 'top-right' }) } diff --git a/examples/sites/demos/pc/app/notify/showClose.vue b/examples/sites/demos/pc/app/notify/showClose.vue index e2fb476337..d11eb437cd 100644 --- a/examples/sites/demos/pc/app/notify/showClose.vue +++ b/examples/sites/demos/pc/app/notify/showClose.vue @@ -15,11 +15,10 @@ export default { baseClick() { Notify({ type: 'info', - title: (h, params) =>通知消息的标题
, + title: '通知消息的标题', message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', showClose: false, - position: 'top-right', - duration: 500000 + position: 'top-right' }) } } diff --git a/examples/sites/demos/pc/app/notify/showIcon-composition-api.vue b/examples/sites/demos/pc/app/notify/showIcon-composition-api.vue index 91fc775552..728b73f460 100644 --- a/examples/sites/demos/pc/app/notify/showIcon-composition-api.vue +++ b/examples/sites/demos/pc/app/notify/showIcon-composition-api.vue @@ -10,11 +10,10 @@ import { Notify, Button as TinyButton } from '@opentiny/vue' function baseClick() { Notify({ type: 'info', - title: (h, params) =>通知消息的标题
, + title: '通知消息的标题', message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', showIcon: false, - position: 'top-right', - duration: 500000 + position: 'top-right' }) } diff --git a/examples/sites/demos/pc/app/notify/showIcon.vue b/examples/sites/demos/pc/app/notify/showIcon.vue index bf76aa0bd8..e365750891 100644 --- a/examples/sites/demos/pc/app/notify/showIcon.vue +++ b/examples/sites/demos/pc/app/notify/showIcon.vue @@ -15,11 +15,10 @@ export default { baseClick() { Notify({ type: 'info', - title: (h, params) =>通知消息的标题
, + title: '通知消息的标题', message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', showIcon: false, - position: 'top-right', - duration: 500000 + position: 'top-right' }) } } diff --git a/examples/sites/demos/pc/app/notify/title-composition-api.vue b/examples/sites/demos/pc/app/notify/title-composition-api.vue deleted file mode 100644 index 7295f24bde..0000000000 --- a/examples/sites/demos/pc/app/notify/title-composition-api.vue +++ /dev/null @@ -1,18 +0,0 @@ - -
- 自定义标题
-
-
-
-
diff --git a/examples/sites/demos/pc/app/notify/title.spec.ts b/examples/sites/demos/pc/app/notify/title.spec.ts
deleted file mode 100644
index 5694585d1d..0000000000
--- a/examples/sites/demos/pc/app/notify/title.spec.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('标题', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('notify#title')
- await page.getByRole('button', { name: '自定义标题' }).click()
- const title = page.locator('.tiny-notify__title')
- await expect(title).toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/notify/title.vue b/examples/sites/demos/pc/app/notify/title.vue
deleted file mode 100644
index 29357e1367..0000000000
--- a/examples/sites/demos/pc/app/notify/title.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
- 自定义标题
-
-
-
-
diff --git a/examples/sites/demos/pc/app/notify/type-composition-api.vue b/examples/sites/demos/pc/app/notify/type-composition-api.vue
index df9264a890..73908eb0a5 100644
--- a/examples/sites/demos/pc/app/notify/type-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/type-composition-api.vue
@@ -13,10 +13,9 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
function infoClick() {
Notify({
type: 'info',
- title: (h, params) => 通知消息的标题
, + title: '通知消息的标题', message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', position: 'top-right', - duration: 500000, customClass: 'my-custom-cls' }) } diff --git a/examples/sites/demos/pc/app/notify/type.vue b/examples/sites/demos/pc/app/notify/type.vue index 18c9ffbb7b..5f84ac4244 100644 --- a/examples/sites/demos/pc/app/notify/type.vue +++ b/examples/sites/demos/pc/app/notify/type.vue @@ -18,10 +18,9 @@ export default { infoClick() { Notify({ type: 'info', - title: (h, params) =>通知消息的标题
, + title: '通知消息的标题', message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', position: 'top-right', - duration: 500000, customClass: 'my-custom-cls' }) }, diff --git a/examples/sites/demos/pc/app/notify/verticalOffset-composition-api.vue b/examples/sites/demos/pc/app/notify/verticalOffset-composition-api.vue index fade46394a..d2a0a373f1 100644 --- a/examples/sites/demos/pc/app/notify/verticalOffset-composition-api.vue +++ b/examples/sites/demos/pc/app/notify/verticalOffset-composition-api.vue @@ -10,10 +10,9 @@ import { Notify, Button as TinyButton } from '@opentiny/vue' function handleClick() { Notify({ type: 'info', - title: (h, params) =>通知消息的标题
, + title: '通知消息的标题', message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', position: 'top-right', - duration: 500000, customClass: 'my-custom-cls', verticalOffset: 100 }) diff --git a/examples/sites/demos/pc/app/notify/verticalOffset.vue b/examples/sites/demos/pc/app/notify/verticalOffset.vue index 4ac63ad6a8..92388f3ea9 100644 --- a/examples/sites/demos/pc/app/notify/verticalOffset.vue +++ b/examples/sites/demos/pc/app/notify/verticalOffset.vue @@ -15,10 +15,9 @@ export default { handleClick() { Notify({ type: 'info', - title: (h, params) =>通知消息的标题
, + title: '通知消息的标题', message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', position: 'top-right', - duration: 500000, customClass: 'my-custom-cls', verticalOffset: 100 }) diff --git a/examples/sites/demos/pc/app/notify/webdoc/notify.js b/examples/sites/demos/pc/app/notify/webdoc/notify.js index 57992f9679..2767ee7c67 100644 --- a/examples/sites/demos/pc/app/notify/webdoc/notify.js +++ b/examples/sites/demos/pc/app/notify/webdoc/notify.js @@ -9,8 +9,24 @@ export default { 'en-US': 'Basic Usage' }, desc: { - 'zh-CN': '通过函数调用的方式使用组件。', - 'en-US': 'Components are used by means of function calls' + 'zh-CN': ` + 通过Notify函数,在页面上弹出通知框组件。+ 通过
title 属性设置通知框标题。+ 通过
message 属性设置通知框的内容。+
+
+ `,
+ 'en-US': `
+ The 小技巧
+ 标题和内容不仅支持字符串传入，还支持 jsx 和 h 函数的写法。
+ Notify function is used to display the notification component on the page. + Set the title of the notification box with the
title property. + Set the contents of the notification box with the
message property. +
+
+ `
},
codeFiles: ['basic-usage.vue']
},
@@ -35,9 +51,10 @@ export default {
'en-US': 'Automatic shutdown delay'
},
desc: {
- 'zh-CN': 'Tips
+ The title and content support not only string passing, but also the writing of jsx and h functions.
+ 可通过 duration 属性设置自动关闭的延迟时间，默认值：4500ms 。
duration 属性设置自动关闭的延迟时间， 默认情况， success info 延时5秒 warning error 延时10秒自动关闭。',
'en-US':
- 'You can set the delay for automatic shutdown through the duration attribute. The default value is 4500 ms.
duration property to set the automatic shutdown delay. By default, success info delays the shutdown by 5 seconds. warning error delays the shutdown by 10 seconds.'
},
codeFiles: ['duration.vue']
},
@@ -54,30 +71,6 @@ export default {
},
codeFiles: ['position.vue']
},
- {
- demoId: 'title',
- name: {
- 'zh-CN': '标题',
- 'en-US': 'Title'
- },
- desc: {
- 'zh-CN': '可通过 title 属性设置通知框标题。
You can set the title of the notification box through the title attribute.
可通过 message 属性设置通知框的内容。
You can set the content of the notification box through the message attribute.
-
努力加载中，请稍后...
-
努力加载中，请稍后...
-
-
-
-
取消