fix: the width of the modal box can be displayed in the center as the browser window size changes (#1554)

examples/sites/demos/apis/modal.js

@@ -443,8 +443,9 @@ export default {
           type: 'number | string',
           defaultValue: '',
           desc: {
-            'zh-CN': '窗口的宽度',
+            'zh-CN': '窗口的宽度（设置宽度像素或者百分比，浏览器窗口大小改变可居中显示)',
-            'en-US': 'window width'
+            'en-US':
+              'The width of the window(Set the width in pixels or percentages, and the browser window size can be changed to display in the center)'
           },
           mode: ['pc', 'mobile', 'mobile-first'],
           pcDemo: 'resize',

examples/sites/demos/pc/app/modal/webdoc/modal.js

@@ -154,9 +154,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>width</code>属性设置窗口宽度，<code>height</code>属性设置高度，<code>resize</code>属性设置是否允许拖动调整窗口大小。</p>',
+          '<p>可通过<code>width</code>属性设置宽度，<code>height</code>属性设置高度，<code>resize</code>属性设置是否允许拖动调整窗口大小。</p>',
         'en-US':
-          '<p>Use <code>width</code> to set the window width, <code>height</code> to set the height, and <code>resize</code> to set whether to allow dragging to resize the window. </p>'
+          '<p>Use <code>width</code> to set the width, <code>height</code> to set the height, and <code>resize</code> to set whether to allow dragging to resize the window. </p>'
       },
       codeFiles: ['resize.vue']
     },

packages/renderless/src/modal/index.ts

@@ -288,7 +288,12 @@ export const open =
             let clientVisibleHeight =
               viewportWindow.document.documentElement.clientHeight || viewportWindow.document.body.clientHeight
 
-            modalBoxElem.style.left = `${clientVisibleWidth / 2 - modalBoxElem.offsetWidth / 2}px`
+            let width = isNaN(props.width) ? props.width : `${props.width}px`
+            if (width) {
+              modalBoxElem.style.left = 'calc((100vw - ' + width + ') / 2)'
+            } else {
+              modalBoxElem.style.left = `${clientVisibleWidth / 2 - modalBoxElem.offsetWidth / 2}px`
+            }
 
             if (
               modalBoxElem.offsetHeight + modalBoxElem.offsetTop + (props.marginSize as number) >

packages/vue/src/modal/src/pc.vue

@@ -137,7 +137,7 @@ export default defineComponent({
           }
         ],
         style: {
-          zIndex: this.state.modalZindex,
+          zIndex: state.modalZindex,
           top: modalTop ? `${modalTop}px` : null
         },
         on: {
@@ -273,58 +273,58 @@ export default defineComponent({
                   footerSlot
                     ? footerSlot.call(this, footerSlotParams, h)
                     : state.theme === 'saas'
-                    ? [
+                      ? [
-                        type === 'confirm'
+                          type === 'confirm'
-                          ? h(
+                            ? h(
-                              Button,
+                                Button,
-                              {
+                                {
-                                on: {
+                                  on: {
-                                  click: this.cancelEvent
+                                    click: this.cancelEvent
-                                }
+                                  }
-                              },
-                              cancelContent || t('ui.button.cancel')
-                            )
-                          : null,
-                        h(
-                          Button,
-                          {
-                            props: {
-                              type: 'primary'
-                            },
-                            on: {
-                              click: this.confirmEvent
-                            }
-                          },
-                          confirmContent || t('ui.button.confirm')
-                        )
-                      ]
-                    : [
-                        h(
-                          Button,
-                          {
-                            props: {
-                              type: 'primary',
-                              ...confirmButtonProps
-                            },
-                            on: {
-                              click: this.confirmEvent
-                            }
-                          },
-                          confirmButtonText
-                        ),
-                        type === 'confirm'
-                          ? h(
-                              Button,
-                              {
-                                on: {
-                                  click: this.cancelEvent
                                 },
-                                props: { ...cancelButtonProps }
+                                cancelContent || t('ui.button.cancel')
+                              )
+                            : null,
+                          h(
+                            Button,
+                            {
+                              props: {
+                                type: 'primary'
                               },
-                              cancelButtonText
+                              on: {
-                            )
+                                click: this.confirmEvent
-                          : null
+                              }
-                      ]
+                            },
+                            confirmContent || t('ui.button.confirm')
+                          )
+                        ]
+                      : [
+                          h(
+                            Button,
+                            {
+                              props: {
+                                type: 'primary',
+                                ...confirmButtonProps
+                              },
+                              on: {
+                                click: this.confirmEvent
+                              }
+                            },
+                            confirmButtonText
+                          ),
+                          type === 'confirm'
+                            ? h(
+                                Button,
+                                {
+                                  on: {
+                                    click: this.cancelEvent
+                                  },
+                                  props: { ...cancelButtonProps }
+                                },
+                                cancelButtonText
+                              )
+                            : null
+                        ]
                 )
               : null,
             !isMsg && resize