zhoujunyu
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
James 2024-04-12 00:03:55 +08:00 committed by GitHub
parent c64c373b94
commit f42012cb1e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 62 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
examples/sites/demos/apis/modal.js
View File

@ -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',

4
examples/sites/demos/pc/app/modal/webdoc/modal.js
View File

@ -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']
},

7
packages/renderless/src/modal/index.ts
View File

@ -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) >

102
packages/vue/src/modal/src/pc.vue
View File

@ -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'
? h(
Button,
{
on: {
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
? [
type === 'confirm'
? h(
Button,
{
on: {
click: this.cancelEvent
}
},
props: { ...cancelButtonProps }
cancelContent || t('ui.button.cancel')
)
: null,
h(
Button,
{
props: {
type: 'primary'
},
cancelButtonText
)
: null
]
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 }
},
cancelButtonText
)
: null
]
)
: null,
!isMsg && resize