Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Apr 11, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions examples/sites/demos/apis/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -443,8 +443,9 @@ export default {
type: 'number | string',
defaultValue: '',
desc: {
'zh-CN': '窗口的宽度',
'en-US': 'window width'
'zh-CN': '窗口的宽度（设置宽度像素或者百分比，浏览器窗口大小改变可居中显示)',
'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',
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/modal/webdoc/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']
},
Expand Down
7 changes: 6 additions & 1 deletion packages/renderless/src/modal/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) >
Expand Down
98 changes: 49 additions & 49 deletions packages/vue/src/modal/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ export default defineComponent({
}
],
style: {
zIndex: this.state.modalZindex,
zIndex: state.modalZindex,
top: modalTop ? `${modalTop}px` : null
},
on: {
Expand Down Expand Up @@ -273,58 +273,58 @@ export default defineComponent({
footerSlot
? footerSlot.call(this, footerSlotParams, h)
: state.theme === 'saas'
? [
type === 'confirm'
? h(
Button,
{
on: {
click: this.cancelEvent
}
? [
type === 'confirm'
? h(
Button,
{
on: {
click: this.cancelEvent
}
},
cancelContent || t('ui.button.cancel')
)
: null,
h(
Button,
{
props: {
type: 'primary'
},
cancelContent || t('ui.button.cancel')
)
: null,
h(
Button,
{
props: {
type: 'primary'
on: {
click: this.confirmEvent
}
},
on: {
click: this.confirmEvent
}
},
confirmContent || t('ui.button.confirm')
)
]
: [
h(
Button,
{
props: {
type: 'primary',
...confirmButtonProps
confirmContent || t('ui.button.confirm')
)
]
: [
h(
Button,
{
props: {
type: 'primary',
...confirmButtonProps
},
on: {
click: this.confirmEvent
}
},
on: {
click: this.confirmEvent
}
},
confirmButtonText
),
type === 'confirm'
? h(
Button,
{
on: {
click: this.cancelEvent
confirmButtonText
),
type === 'confirm'
? h(
Button,
{
on: {
click: this.cancelEvent
},
props: { ...cancelButtonProps }
},
props: { ...cancelButtonProps }
},
cancelButtonText
)
: null
]
cancelButtonText
)
: null
]
)
: null,
!isMsg && resize
Expand Down
Loading