feat(moda;): can switch full screen by double-clicking on the head close #277

CHANGELOG.zh_CN.md

@@ -3,6 +3,7 @@
 ### ✨ Features
 
 - 新增 `settingButtonPosition`配置项,用于配置`设置`按钮位置
+- `modal`可以通过双击头部切换全屏
 
 ### ⚡ Performance Improvements
 

src/components/Modal/src/BasicModal.vue

@@ -10,7 +10,11 @@
     </template>
 
     <template #title v-if="!$slots.title">
-      <ModalHeader :helpMessage="getProps.helpMessage" :title="getMergeProps.title" />
+      <ModalHeader
+        :helpMessage="getProps.helpMessage"
+        :title="getMergeProps.title"
+        @dblclick="handleTitleDbClick"
+      />
     </template>
 
     <template #footer v-if="!$slots.footer">
@@ -193,6 +197,12 @@
         extHeightRef.value = height;
       }
 
+      function handleTitleDbClick(e: ChangeEvent) {
+        if (!props.canFullscreen) return;
+        e.stopPropagation();
+        handleFullScreen(e);
+      }
+
       return {
         handleCancel,
         getBindValue,
@@ -206,6 +216,7 @@
         modalWrapperRef,
         handleExtHeight,
         handleHeightChange,
+        handleTitleDbClick,
       };
     },
   });

src/design/index.less

@@ -44,6 +44,9 @@ body {
 }
 
 a:focus,
-a:active {
+a:active,
-  outline: none;
+button,
+div,
+span {
+  outline: none !important;
 }