Skip to content

feat(modal): supports setting the headerDragable property #3918

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
+41 −10
Open

feat(modal): supports setting the headerDragable property #3918

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
16 changes: 15 additions & 1 deletion examples/sites/demos/apis/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,14 +115,28 @@ export default {
{
name: 'footer-dragable',
type: 'boolean',
defaultValue: 'true',
defaultValue: 'false',
desc: {
'zh-CN': '控制底部可拖拽',
'en-US': 'Control bottom dragable'
},
mode: ['pc'],
pcDemo: 'modal-footer'
},
{
name: 'header-dragable',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '控制标题可拖拽',
'en-US': 'Control header dragable'
},
mode: ['pc'],
pcDemo: 'modal-header',
meta: {
stable: '3.28.0'
}
},
{
name: 'fullscreen',
type: 'boolean',
Expand Down
18 changes: 16 additions & 2 deletions examples/sites/demos/pc/app/modal/modal-header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,15 @@
<h2>标签式调用</h2>
<div class="content">
<tiny-button @click="openModal">自定义弹窗标题</tiny-button>
<tiny-modal v-model="show" title="自定义弹窗标题" message="窗口内容" show-header show-footer> </tiny-modal>
<tiny-modal
v-model="show"
title="自定义弹窗标题"
message="窗口内容"
show-header
show-footer
:header-dragable="false"
>
</tiny-modal>
Comment on lines +10 to +18
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

Demo disables the feature it's meant to showcase.

The demo sets :header-dragable="false", which disables header dragging. If the purpose of this demo is to showcase the new header-dragable feature, it would be more intuitive to demonstrate the feature enabled (set to true) so users can interact with draggable headers.

Recommendation: Consider one of these approaches:

  1. Set header-dragable="true" to demonstrate the dragging capability
  2. Show both enabled and disabled states with two separate modals
  3. Add explanatory text indicating this demo shows how to disable dragging
🔎 Option 1: Enable the feature in the demo: 
       <tiny-modal
         v-model="show"
         title="自定义弹窗标题"
         message="窗口内容"
         show-header
         show-footer
-        :header-dragable="false"
+        :header-dragable="true"
       >
       </tiny-modal>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<tiny-modal
v-model="show"
title="自定义弹窗标题"
message="窗口内容"
show-header
show-footer
:header-dragable="false"
>
</tiny-modal>
<tiny-modal
v-model="show"
title="自定义弹窗标题"
message="窗口内容"
show-header
show-footer
:header-dragable="true"
>
</tiny-modal>
🤖 Prompt for AI Agents 
In examples/sites/demos/pc/app/modal/modal-header.vue around lines 10 to 18 the
demo unnecessarily disables the feature it intends to showcase by setting
:header-dragable="false"; change the demo to demonstrate the draggable header by
setting header-dragable to true (or add a second modal demonstrating both true
and false, or add text explaining this one shows the disabled state) so users
can see the drag behavior — update the prop to true or add the alternate
modal/text accordingly.

</div>
</div>
</template>
Expand All @@ -27,7 +35,13 @@ export default {
},
methods: {
btnClick() {
Modal.alert({ message: '窗口内容', title: '自定义弹窗标题', showHeader: true, showFooter: true })
Modal.alert({
message: '窗口内容',
title: '自定义弹窗标题',
showHeader: true,
showFooter: true,
headerDragable: false
})
Comment on lines +38 to +44
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

Demo disables the feature in functional call as well.

Similar to the template usage, the functional call also sets headerDragable: false, which disables the dragging feature. For a feature introduction demo, it would be more effective to show the feature enabled.

🔎 Consider enabling the feature: 
       Modal.alert({
         message: '窗口内容',
         title: '自定义弹窗标题',
         showHeader: true,
         showFooter: true,
-        headerDragable: false
+        headerDragable: true
       })
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Modal.alert({
message: '窗口内容',
title: '自定义弹窗标题',
showHeader: true,
showFooter: true,
headerDragable: false
})
Modal.alert({
message: '窗口内容',
title: '自定义弹窗标题',
showHeader: true,
showFooter: true,
headerDragable: true
})
🤖 Prompt for AI Agents 
In examples/sites/demos/pc/app/modal/modal-header.vue around lines 38 to 44, the
functional demo call disables dragging by setting headerDragable: false; update
this to enable the feature (set headerDragable: true or remove the property if
true is the default) so the demo demonstrates draggable headers as intended.

},
openModal() {
this.show = true
Expand Down
13 changes: 7 additions & 6 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 @@ -77,7 +77,8 @@ export default {
},
desc: {
'zh-CN': `
通过 <code>show-header</code>属性，设置是否显示头部。默认值为：<code>true</code><br>
通过<code>show-header</code>属性，设置是否显示头部。默认值为：<code>true</code>。<br>
通过<code>header-dragable</code>属性，设置是否可以通过标题拖动弹窗。默认值为：<code>true</code>。<br>
通过<code>title</code>属性，设置窗口的标题。<br>
`,
'en-US': `
Expand All @@ -95,17 +96,17 @@ export default {
},
desc: {
'zh-CN': `
通过<code>show-footer</code>属性设置是否显示底部。默认值为：<code>false</code> <br>
通过<code>confirm-content</code>属性，修改确认按钮文字；<code>cancel-content</code>属性，修改取消按钮文字。<br>
通过<code>confirm-btn-props</code>属性，修改确认按钮的属性；<code>cancel-btn-props</code>属性，修改取消按钮的属性。<br>
通过<code>footerDragable</code>属性，让底部也支持拖动（默认只有标题栏可拖动）。默认值为：<code>false</code><br>
通过<code>show-footer</code>属性，设置是否显示底部。默认值为：<code>false</code>。<br>
通过<code>footer-dragable</code>属性，让底部也支持拖动（默认只有标题栏可拖动）。默认值为：<code>false</code>。<br>
通过<code>confirm-content</code>属性，修改确认按钮文字；通过<code>cancel-content</code>属性，修改取消按钮文字。<br>
通过<code>confirm-btn-props</code>属性，修改确认按钮的属性；通过<code>cancel-btn-props</code>属性，修改取消按钮的属性。<br>
通过<code>#footer</code>插槽，完全自定义底部内容。<br>
`,
'en-US': `
Use the <code>show-footer</code> property to set whether the bottom is displayed. The default value is <code>false</code> <br>
Modify the confirmation button text by using the <code>confirm-content</code> property; The <code> cancer-content </code> property modifies the cancel button text. <br>
The <code>confirm-btn-props</code> property is used to modify the properties of the confirm button. <code> cancer-btn-props </code> property to modify the properties of the cancel button. <br>
Use the <code>footerDragable</code> property to make the bottom also dragable (by default, only the title bar can be dragged). The default value is <code>false</code><br>
Use the <code>footer-dragable</code> property to make the bottom also dragable (by default, only the title bar can be dragged). The default value is <code>false</code><br>
Completely customize the bottom content via the <code>#footer</code> slot. <br>
`
},
Expand Down
1 change: 1 addition & 0 deletions packages/vue/src/modal/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ export const modalProps = {
customClass: String, // mf 属性
confirmBtnProps: { type: Object, default: () => ({}) },
cancelBtnProps: { type: Object, default: () => ({}) },
headerDragable: { type: Boolean, default: true },
footerDragable: Boolean,
tiny_theme: String,
slots: Object
Expand Down
3 changes: 2 additions & 1 deletion packages/vue/src/modal/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export default defineComponent({
'cancelContent',
'confirmBtnProps',
'cancelBtnProps',
'headerDragable',
'footerDragable',
'tiny_theme',
'slots',
Expand Down Expand Up @@ -174,7 +175,7 @@ export default defineComponent({
{
class: ['tiny-modal__header', status && state.theme === 'saas' ? 'tiny-modal__header-icon' : ''],
on: {
mousedown: this.mousedownEvent
mousedown: this.headerDragable ? this.mousedownEvent : () => {}
}
},
[
Expand Down
Loading