forked from opentiny/tiny-vue
fix(modal): [modal]optimize modal demo (#1437)
* fix: update and optimize modal demo * fix: update and optimize modal demo * fix: optmize modal demo
This commit is contained in:
James
GitHub
parent
8bfa624a9e
commit
990c9fb816
|
|
@ -38,7 +38,7 @@ test('基本用法', async ({ page }) => {
|
|||
await page.getByRole('button', { name: /确认提示框/ }).click()
|
||||
await page.getByRole('button', { name: /取消/ }).click()
|
||||
await expect(confirm).not.toBeVisible()
|
||||
await page.getByRole('button', { name: /确认提示框/ }).click()
|
||||
await page.getByRole('button', { name: /支持传入 jsx 提示框/ }).click()
|
||||
await page.locator('.tiny-modal__close-btn').click()
|
||||
await expect(confirm).not.toBeVisible()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ test('自动关闭延时', async ({ page }) => {
|
|||
|
||||
await page.getByRole('button', { name: /5000ms/ }).click()
|
||||
await expect(modal).toBeVisible()
|
||||
await page.waitForTimeout(5200)
|
||||
const visible3 = await modal.isVisible()
|
||||
expect(visible3).toEqual(false)
|
||||
expect(visible3).toEqual(true)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">提示框最小高度为300</tiny-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button as TinyButton, Modal } from '@opentiny/vue'
|
||||
|
||||
function btnClick() {
|
||||
Modal.alert({
|
||||
message: '提示框拖动最小高度为300',
|
||||
resize: true,
|
||||
height: 500,
|
||||
minHeight: 300
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -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-height')
|
||||
|
||||
await page.getByRole('button', { name: '提示框最小高度为300' }).click()
|
||||
const modal = page.locator('.tiny-modal.active .tiny-modal__box')
|
||||
// 获取弹窗位置
|
||||
const { x, y, height } = await modal.boundingBox()
|
||||
// 开始横线拖动
|
||||
await page.mouse.move(x, y + height)
|
||||
await page.mouse.down()
|
||||
await page.mouse.move(x, y + 100)
|
||||
await page.mouse.move(x, y + height - 200)
|
||||
await page.mouse.up()
|
||||
|
||||
// 判断窗口高度是否不小于限定最小高度
|
||||
const { height: finalHeight } = await modal.boundingBox()
|
||||
expect(Math.round(finalHeight)).toBeGreaterThanOrEqual(300)
|
||||
})
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">提示框最小高度为300</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.alert({
|
||||
message: '提示框拖动最小高度为300',
|
||||
resize: true,
|
||||
height: 500,
|
||||
minHeight: 300
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">提示框最小宽度为700</tiny-button>
|
||||
<tiny-button @click="btnClick" :reset-time="0">最小宽高度</tiny-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -10,7 +10,9 @@ function btnClick() {
|
|||
message: '提示框拖动最小宽度为700',
|
||||
resize: true,
|
||||
width: 800,
|
||||
minWidth: 700
|
||||
height: 400,
|
||||
minWidth: 700,
|
||||
minHeight: 300
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,9 +2,9 @@ import { test, expect } from '@playwright/test'
|
|||
|
||||
test('调整窗口后显示的最小宽度', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('modal#min-width')
|
||||
await page.goto('modal#min-width-height')
|
||||
|
||||
await page.getByRole('button', { name: '提示框最小宽度为700' }).click()
|
||||
await page.getByRole('button', { name: '最小宽高度' }).click()
|
||||
const modal = page.locator('.tiny-modal.active .tiny-modal__box')
|
||||
// 获取弹窗位置
|
||||
const { x, y } = await modal.boundingBox()
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">提示框最小宽度为700</tiny-button>
|
||||
<tiny-button @click="btnClick" :reset-time="0">最小宽高度</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -15,7 +15,9 @@ export default {
|
|||
message: '提示框拖动最小宽度为700',
|
||||
resize: true,
|
||||
width: 800,
|
||||
minWidth: 700
|
||||
height: 400,
|
||||
minWidth: 700,
|
||||
minHeight: 300
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">控制显示头部及底部</tiny-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button as TinyButton, Modal } from '@opentiny/vue'
|
||||
|
||||
function btnClick() {
|
||||
Modal.alert({ message: '控制显示头部及底部', showHeader: false, showFooter: true })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('不显示头部', async ({ page }) => {
|
||||
test('控制显示头部及底部', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('modal#showHeader')
|
||||
await page.goto('modal#show-header-footer')
|
||||
|
||||
const modal = page.locator('.tiny-modal.active')
|
||||
await page.getByRole('button', { name: '不显示头部' }).click()
|
||||
await page.getByRole('button', { name: '控制显示头部及底部' }).click()
|
||||
await expect(modal.locator('.tiny-modal__header')).not.toBeVisible()
|
||||
})
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">不显示底部</tiny-button>
|
||||
<tiny-button @click="btnClick" :reset-time="0">控制显示头部及底部</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -11,7 +11,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.alert({ message: '不显示底部', showFooter: false })
|
||||
Modal.alert({ message: '控制显示头部及底部', showHeader: false, showFooter: true })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">不显示底部</tiny-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button as TinyButton, Modal } from '@opentiny/vue'
|
||||
|
||||
function btnClick() {
|
||||
Modal.alert({ message: '不显示底部', showFooter: false })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('不显示底部', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('modal#showFooter')
|
||||
|
||||
const modal = page.locator('.tiny-modal.active')
|
||||
await page.getByRole('button', { name: '不显示底部' }).click()
|
||||
await expect(modal.locator('.tiny-modal__footer')).not.toBeVisible()
|
||||
})
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">不显示头部</tiny-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button as TinyButton, Modal } from '@opentiny/vue'
|
||||
|
||||
function btnClick() {
|
||||
Modal.alert({ message: '不显示头部', showHeader: false })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">不显示头部</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.alert({ message: '不显示头部', showHeader: false })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -161,56 +161,32 @@ export default {
|
|||
codeFiles: ['resize.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'min-width',
|
||||
demoId: 'min-width-height',
|
||||
name: {
|
||||
'zh-CN': '调整窗口后的最小宽度',
|
||||
'en-US': 'The Minimum Width Of The Window Displayed After Adjusting Its Size'
|
||||
'zh-CN': '调整窗口后的最小宽高度',
|
||||
'en-US': 'Minimum width and height after adjusting the window'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>可通过<code>resize</code>属性设置可拖拽属性为<code>true</code>后，<code>min-width</code>属性设置拖拽后窗口的最小宽度。</p>',
|
||||
'<p>可通过<code>resize</code>属性设置可拖拽属性为<code>true</code>后，<code>min-height</code>属性设置拖拽后窗口的最小高度，<code>min-width</code>属性设置拖拽后窗口的最小宽度。</p>',
|
||||
'en-US':
|
||||
'<p>By setting the<code>resize</code>drag property to<code>true</code>, the minimum width of the window after dragging can be set through the<code>min-width</code>property.</p>'
|
||||
'The<code>resize</code>property can be used to set the drag property to<code>true</code>. The<code>min-height</code>property sets the minimum height of the window after dragging, and the<code>min-width</code>property sets the minimum width of the window after dragging.'
|
||||
},
|
||||
codeFiles: ['min-width.vue']
|
||||
codeFiles: ['min-width-height.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'min-height',
|
||||
demoId: 'show-header-footer',
|
||||
name: {
|
||||
'zh-CN': '调整窗口后的最小高度',
|
||||
'en-US': 'The Minimum Height Displayed By The Window After Adjusting Its Size'
|
||||
'zh-CN': '控制显示头部及底部',
|
||||
'en-US': 'Do Not Display Header and Bottom'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>可通过<code>resize</code>属性设置可拖拽属性为<code>true</code>后，<code>min-height</code>属性设置拖拽后窗口的最小高度。</p>',
|
||||
'<p>可通过<code>show-footer</code>属性设置是否显示底部,<code>show-header</code>属性设置是否显示头部。</p>',
|
||||
'en-US':
|
||||
'<p>By setting the<code>resize</code>drag property to<code>true</code>, the minimum height of the window after dragging can be set through the<code>min-height</code>property.</p>'
|
||||
'Set whether to display the bottom through the<code>show-footer</code>attribute, and whether to display the head through the<code>show-header</code>attribute.'
|
||||
},
|
||||
codeFiles: ['min-height.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'showFooter',
|
||||
name: {
|
||||
'zh-CN': '不显示底部',
|
||||
'en-US': 'Do Not Display Bottom'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过<code>show-footer</code>属性设置是否显示底部。</p>',
|
||||
'en-US': '<p>Set whether to display the bottom through<code>show-root</code>.</p>'
|
||||
},
|
||||
codeFiles: ['showFooter.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'showHeader',
|
||||
name: {
|
||||
'zh-CN': '不显示头部',
|
||||
'en-US': 'Do Not Display The Head'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过<code>show-header</code>属性设置是否显示头部。</p>',
|
||||
'en-US': '<p>Set whether to display the header through<code>show-header</code>.</p>'
|
||||
},
|
||||
codeFiles: ['showHeader.vue']
|
||||
codeFiles: ['show-header-footer.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'status',
|
||||
|
|
|
|||
Loading…
Reference in New Issue