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

Author: gausszhou

examples/sites/demos/apis/modal.js

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

examples/sites/demos/pc/app/modal/modal-header.vue

@@ -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>
     </div>
   </div>
 </template>
@@ -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
+      })
     },
     openModal() {
       this.show = true

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

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

packages/vue/src/modal/src/index.ts

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

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

@@ -66,6 +66,7 @@ export default defineComponent({
     'cancelContent',
     'confirmBtnProps',
     'cancelBtnProps',
+    'headerDragable',
     'footerDragable',
     'tiny_theme',
     'slots',
@@ -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 : () => {}
                     }
                   },
                   [