feat(modal): [modal] add show-close feature (#2840)

* feat: add new features to modal components (show-close) * fix: modify e2e-test * fix: revise inspection comments
opentiny · Jan 24, 2025 · f80d683 · f80d683
1 parent 82f2309
commit f80d683
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 10 deletions.
diff --git 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
@@ -16,6 +16,7 @@
         show-footer
         v-bind="options"
         :esc-closable="true"
+        show-close
       >
         <tiny-form :model="createData" label-width="100px">
           <tiny-form-item label="用户名" prop="username">
@@ -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
@@ -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
@@ -16,6 +16,7 @@
         show-footer
         v-bind="options"
         :esc-closable="true"
+        show-close
       >
         <tiny-form :model="createData" label-width="100px">
           <tiny-form-item label="用户名" prop="username">
@@ -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
@@ -203,11 +203,13 @@ export default {
         'zh-CN': `
           通过<code>esc-closable</code>属性设置是否允许按 Esc 键关闭窗口。默认值为<code>false</code><br>
           通过<code>z-index</code>属性设置自定义堆叠顺序。<br>
+          通过<code>show-close</code>属性设置自定义是否显示关闭按钮。默认值为<code>true</code><br>
           通过<code>is-form-reset</code>属性，设置关闭弹窗后，是否重置数据。默认值为<code>true</code>,即关闭弹窗后重置数据。<br>
         `,
         'en-US': ` 
           The <code>esc-closable</code> property sets whether to allow the Esc key to close the window. The default value is <code>false</code><br>
           You can set a custom stack order using the <code>z-index</code> property. <br>
+          Customize whether to display a close button through the<code>show-close</code>attribute. The default value is<code>true</code><br>
           You can use the <code>is-form-reset</code> property to set whether data is reset after modal is closed. The default value is <code>true</code>, that is, the data is reset after the modal window is closed. <br>
         `
       },

diff --git 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,