Skip to content

[WIP]fix(modal): 修复 modal 组件在 alert, confirm 的弹窗场景下 top 属性不生效的问题 #3919

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

Open
gausszhou wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

[WIP]fix(modal): 修复 modal 组件在 alert, confirm 的弹窗场景下 top 属性不生效的问题 #3919

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
6 changes: 3 additions & 3 deletions examples/sites/demos/apis/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -379,10 +379,10 @@ export default {
{
name: 'top',
type: 'number | string',
defaultValue: '80',
defaultValue: '80px',
Copy link

@coderabbitai coderabbitai bot Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find the modal.js file and examine the top property default value
find . -name "modal.js" -type f 2>/dev/null | head -20

Repository: opentiny/tiny-vue

Length of output: 211

🏁 Script executed:

#!/bin/bash
# Read the modal.js file around line 382
sed -n '375,390p' ./examples/sites/demos/apis/modal.js

# Also search for where the top property is defined in Modal component
grep -n "top.*default" ./examples/sites/demos/apis/modal.js | head -20

Repository: opentiny/tiny-vue

Length of output: 499

🏁 Script executed:

#!/bin/bash
# Search for the Modal component's top prop definition in the source code
find . -path ./node_modules -prune -o -name "index.ts" -type f -print | xargs grep -l "computedBoxStyle" 2>/dev/null | head -5

# Also search for Modal component files
find . -path ./node_modules -prune -o -name "*modal*" -type f \( -name "*.ts" -o -name "*.tsx" -o -name "*.vue" \) -print | grep -E "src|packages" | head -20

Repository: opentiny/tiny-vue

Length of output: 193

🏁 Script executed:

#!/bin/bash
# Read the computedBoxStyle function in modal index.ts
sed -n '60,90p' ./packages/renderless/src/modal/index.ts

# Also search for the complete computedBoxStyle function
grep -n "computedBoxStyle" ./packages/renderless/src/modal/index.ts

# Get more context around that area
sed -n '1,120p' ./packages/renderless/src/modal/index.ts | tail -80

Repository: opentiny/tiny-vue

Length of output: 2936

🏁 Script executed:

#!/bin/bash
# Search for the Modal component props definition to find the actual default value for 'top'
find . -path ./node_modules -prune -o -path ./packages/renderless -prune -o -name "*modal*" -type f \( -name "*.ts" -o -name "*.tsx" -o -name "*.vue" \) -print | xargs grep -l "top.*default" 2>/dev/null | head -10

# Also check the Modal type definitions
grep -n "top" ./packages/renderless/types/modal.type.ts | head -20

Repository: opentiny/tiny-vue

Length of output: 325

🏁 Script executed:

#!/bin/bash
# Find the actual Modal component implementation with prop defaults
find ./packages -name "*modal*" \( -name "*.ts" -o -name "*.tsx" -o -name "*.vue" \) -type f | xargs grep -l "props.*top" 2>/dev/null | head -10

# Also check Vue component definition files
find ./packages/vue/src/modal -type f \( -name "*.ts" -o -name "*.tsx" -o -name "*.vue" \) | xargs cat 2>/dev/null | head -200

Repository: opentiny/tiny-vue

Length of output: 5062

🏁 Script executed:

#!/bin/bash
# Look for the Modal component's props definition more specifically
find ./packages/vue/src/modal -name "*.vue" -o -name "*.ts" -o -name "*.tsx" | xargs grep -l "top" 2>/dev/null

# Check the main Modal component file
ls -la ./packages/vue/src/modal/

# Read the main Modal component
cat ./packages/vue/src/modal/src/modal.tsx 2>/dev/null | head -150

Repository: opentiny/tiny-vue

Length of output: 586

🏁 Script executed:

#!/bin/bash
# Read the Modal component index.ts to find props definition
cat ./packages/vue/src/modal/src/index.ts

# Also check the pc.vue component
head -100 ./packages/vue/src/modal/src/pc.vue

Repository: opentiny/tiny-vue

Length of output: 5472

🏁 Script executed:

#!/bin/bash
# Verify the exact prop default for top and check how it's rendered
grep -A 1 "top:" ./packages/vue/src/modal/src/index.ts

# Also check if there are any comments about this in the computedBoxStyle
sed -n '55,90p' ./packages/renderless/src/modal/index.ts

Repository: opentiny/tiny-vue

Length of output: 1112

Correct the documentation for the top property default value.

The top property default is a number 80 (not the string '80px'). The computedBoxStyle function in packages/renderless/src/modal/index.ts automatically converts numeric values to strings with the 'px' suffix for alert and confirm modal types. Update the defaultValue in the documentation from '80px' to 80 and add a note explaining that the suffix is automatically appended.

🤖 Prompt for AI Agents 
In examples/sites/demos/apis/modal.js around line 382, update the documented
default for the `top` property from the string '80px' to the number 80 and add a
brief note that the renderless computedBoxStyle function will automatically
append the 'px' suffix for alert/confirm modal types; change the defaultValue to
80 and include a one-line comment or note indicating the px suffix is appended
automatically.

desc: {
'zh-CN': "消息距离顶部的位置，仅当 type 为 'message' 时有效",
'en-US': "The position of the message from the top, only valid when type is 'message'"
'zh-CN': '模态框距离顶部的位置',
'en-US': 'The position of the modal from the top'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'message-top',
Expand Down
20 changes: 18 additions & 2 deletions examples/sites/demos/pc/app/modal/message-top.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<template>
<div>
<div class="content">
<tiny-button @click="btnClick">消息距离顶部 500px</tiny-button>
<tiny-button @click="btnClick1">提示弹窗距离顶部 300px</tiny-button>
<tiny-button @click="btnClick2">确认弹窗距离顶部 50vh</tiny-button>
<tiny-button @click="btnClick3">消息距离顶部 500px</tiny-button>
</div>
</div>
</template>
Expand All @@ -14,7 +16,21 @@ export default {
TinyButton: Button
},
methods: {
btnClick() {
btnClick1() {
Modal.alert({
status: 'info',
message: '提示弹窗距离顶部 300px',
top: 300
})
},
btnClick2() {
Modal.confirm({
status: 'info',
message: '确认弹窗距离顶部 50vh',
top: '50vh'
})
},
btnClick3() {
Modal.message({
status: 'info',
message: '自定义消息的内容距离顶部 500px',
Expand Down
6 changes: 3 additions & 3 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 @@ -301,12 +301,12 @@ export default {
{
demoId: 'message-top',
name: {
'zh-CN': '消息距离顶部位置',
'zh-CN': '模态框距离顶部位置',
'en-US': 'Position from top'
},
desc: {
'zh-CN': '通过<code>top</code>属性设置消息距离顶部的位置，单位为 px',
'en-US': `Use the <code>top</code> property to set the distance from the top of the message in units of px. `
'zh-CN': '通过<code>top</code>属性设置模态框距离顶部的位置',
'en-US': 'Use the <code>top</code> property to set the distance from the top of the modal.'
},
codeFiles: ['message-top.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 @@ -61,9 +61,14 @@ export const computedBoxStyle =
return {}
}

let top = ''
let width: string | number = ''
let height: string | number = ''

if (props.type === 'alert' || props.type === 'confirm') {
top = typeof props.top === 'number' ? `${props.top}px` : props.top
}

if (props.width) {
width = isNaN(props.width as number) ? props.width : `${props.width}px`
}
Expand All @@ -72,7 +77,7 @@ export const computedBoxStyle =
height = isNaN(props.height as number) ? props.height : `${props.height}px`
}

return { width, height }
return { top, width, height }
}

export const watchValue =
Expand Down
Loading