fix(drawer): 解决无标题情况下，关闭按钮不可点击的问题 (#484)

WeBankFinTech · Oct 7, 2023 · a7aad88 · a7aad88
1 parent 665eb39
commit a7aad88
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/components/drawer/style/index.less b/components/drawer/style/index.less
@@ -2,7 +2,6 @@
 @import '../../style/mixins/index';
 @import './mixin.less';
 
-
 @drawer-prefix-cls: ~'@{cls-prefix}-drawer';
 
 .@{drawer-prefix-cls} {
@@ -20,6 +19,12 @@
     &-container {
         .fixed-full();
         display: flex;
+
+        &.@{drawer-prefix-cls}-no-header {
+            .@{drawer-prefix-cls}-wrapper {
+                padding-top: 22px;
+            }
+        }
     }
 
     &-wrapper {
@@ -39,7 +44,8 @@
         color: var(--f-head-color);
         font-weight: @font-weight-medium;
         font-size: @font-size-head;
-        border-bottom: var(--f-border-width-base) var(--f-border-style-base) var(--f-border-color-split);
+        border-bottom: var(--f-border-width-base) var(--f-border-style-base)
+            var(--f-border-color-split);
 
         .@{drawer-prefix-cls}-close {
             top: auto;
@@ -65,7 +71,8 @@
             margin-right: @padding-md;
         }
         &-has-border {
-            border-top: var(--f-border-width-base) var(--f-border-style-base) var(--f-border-color-split);
+            border-top: var(--f-border-width-base) var(--f-border-style-base)
+                var(--f-border-color-split);
         }
     }
 
@@ -105,7 +112,6 @@
             align-items: flex-start;
         }
 
-
         .@{drawer-prefix-cls}-wrapper {
             border-top-left-radius: 0;
             border-top-right-radius: 0;
@@ -138,7 +144,6 @@
             align-items: flex-end;
         }
 
-
         .@{drawer-prefix-cls}-wrapper {
             border-bottom-right-radius: 0;
             border-bottom-left-radius: 0;
@@ -169,31 +174,31 @@
             background: var(--f-primary-color);
         }
 
-        &-left{
+        &-left {
             top: 0;
             right: 0;
             width: 2px;
             height: 100%;
             cursor: col-resize;
         }
 
-        &-right{
+        &-right {
             top: 0;
             left: 0;
             width: 2px;
             height: 100%;
             cursor: col-resize;
         }
 
-        &-top{
+        &-top {
             bottom: 0;
             left: 0;
             width: 100%;
             height: 2px;
             cursor: row-resize;
         }
 
-        &-bottom{
+        &-bottom {
             top: 0;
             left: 0;
             width: 100%;
@@ -202,4 +207,3 @@
         }
     }
 }
-
diff --git a/docs/.vitepress/components/drawer/common.vue b/docs/.vitepress/components/drawer/common.vue
@@ -16,7 +16,11 @@
             <div>我是内容...</div>
         </FDrawer>
         <FDrawer v-model:show="show[1]" @ok="show[1] = true">
-            <div>没有标题...</div>
+            <FAlert
+                style="margin-bottom: 10px"
+                type="info"
+                message="没有标题..."
+            />
             <div>没有标题...</div>
             <div>没有标题...</div>
         </FDrawer>