diff --git a/examples/sites/demos/apis/modal.js b/examples/sites/demos/apis/modal.js index 02a5087725..fd5f56257a 100644 --- a/examples/sites/demos/apis/modal.js +++ b/examples/sites/demos/apis/modal.js @@ -330,12 +330,16 @@ export default { { name: 'show-close', type: 'Boolean', - defaultValue: '', + defaultValue: 'true', desc: { 'zh-CN': '是否显示关闭按钮,默认值为 true', 'en-US': '' }, - mode: ['mobile-first'], + meta: { + stable: '3.22.0' + }, + mode: ['pc', 'mobile-first'], + pcDemo: 'modal-other', mfDemo: '' }, { 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 index 0a5eb13e4f..d40ac34e29 100644 --- a/examples/sites/demos/pc/app/modal/modal-other-composition-api.vue +++ b/examples/sites/demos/pc/app/modal/modal-other-composition-api.vue @@ -16,6 +16,7 @@ show-footer v-bind="options" :esc-closable="true" + show-close > @@ -58,6 +59,7 @@ function btnClick() { title: '自定义弹窗标题', showHeader: true, showFooter: true, + showClose: false, ...options.value }) } diff --git a/examples/sites/demos/pc/app/modal/modal-other.spec.ts b/examples/sites/demos/pc/app/modal/modal-other.spec.ts index 469b8402e1..2c61222c9b 100644 --- a/examples/sites/demos/pc/app/modal/modal-other.spec.ts +++ b/examples/sites/demos/pc/app/modal/modal-other.spec.ts @@ -2,8 +2,10 @@ import { test, expect } from '@playwright/test' test('弹窗其他特性', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) + const close = page.locator('.tiny-modal__close-btn > .tiny-svg') await page.goto('modal#modal-other') await page.getByRole('button', { name: '弹窗 esc 关闭' }).first().click() + await expect(close).toBeHidden() await page.locator('body').press('Escape') await page.getByRole('button', { name: '弹窗 esc 关闭,保留表单数据' }).click() await page.locator('body').press('Escape') diff --git a/examples/sites/demos/pc/app/modal/modal-other.vue b/examples/sites/demos/pc/app/modal/modal-other.vue index 915a0bf574..33f1cafe87 100644 --- a/examples/sites/demos/pc/app/modal/modal-other.vue +++ b/examples/sites/demos/pc/app/modal/modal-other.vue @@ -16,6 +16,7 @@ show-footer v-bind="options" :esc-closable="true" + show-close > @@ -62,6 +63,7 @@ export default { title: '自定义弹窗标题', showHeader: true, showFooter: true, + showClose: false, ...this.options }) }, diff --git a/examples/sites/demos/pc/app/modal/webdoc/modal.js b/examples/sites/demos/pc/app/modal/webdoc/modal.js index 1f0673b0f3..4e0a6b3a5b 100644 --- a/examples/sites/demos/pc/app/modal/webdoc/modal.js +++ b/examples/sites/demos/pc/app/modal/webdoc/modal.js @@ -203,11 +203,13 @@ export default { 'zh-CN': ` 通过esc-closable属性设置是否允许按 Esc 键关闭窗口。默认值为false
通过z-index属性设置自定义堆叠顺序。
+ 通过show-close属性设置自定义是否显示关闭按钮。默认值为true
通过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.
+ Customize whether to display a close button through theshow-closeattribute. The default value istrue
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.
` }, diff --git a/packages/vue/src/modal/src/pc.vue b/packages/vue/src/modal/src/pc.vue index 8b4429b4ea..fe52e8d0df 100644 --- a/packages/vue/src/modal/src/pc.vue +++ b/packages/vue/src/modal/src/pc.vue @@ -68,7 +68,8 @@ export default defineComponent({ 'cancelBtnProps', 'footerDragable', 'tiny_theme', - 'slots' + 'slots', + 'showClose' ], emits: [ 'update:modelValue', @@ -88,7 +89,19 @@ export default defineComponent({ return setup({ props, context, renderless, api }) as unknown as IModalApi }, render() { - let { $props = {}, state, scopedSlots, vSize, type, resize, animat, status, showHeader, messageClosable } = this + let { + $props = {}, + state, + scopedSlots, + vSize, + type, + resize, + showClose, + animat, + status, + showHeader, + messageClosable + } = this let { showFooter, title, message, lockScroll, lockView, mask, _constants: constants, t } = this let { confirmContent, cancelContent, confirmBtnProps, cancelBtnProps } = this let { zoomLocat, visible, contentVisible, modalTop, isMsg } = state @@ -199,12 +212,14 @@ export default defineComponent({ } }) : null, - h(iconClose(), { - class: ['tiny-modal__close-btn', 'trigger__btn'], - on: { - click: this.closeEvent - } - }) + showClose + ? h(iconClose(), { + class: ['tiny-modal__close-btn', 'trigger__btn'], + on: { + click: this.closeEvent + } + }) + : null ] ) : null,