refactor(drawer): target prop refactored

demo/documentation/components/drawer/enUS/index.md

@@ -22,7 +22,7 @@ target
 |height|`number \| string`|`251`|Works when placement is `top` and `bottom`.|
 |mask-closable|`boolean`|`true`|Whether to emit `hide` event when click mask.|
 |drawer-style|`object`|`null`||
-|target|`() => HTMLElement`|`undefined`|The area where the drawer appears.|
+|target|`() => HTMLElement`|`() => document.body`|The area where the drawer appears.|
 |drawer-class|`string`|`null`||
 
 ## Slots

demo/documentation/components/drawer/enUS/target.md

@@ -8,20 +8,26 @@
 </n-button-group>
 <div 
   ref="target" 
-  style="position:relative;
+  style="
+    position:relative;
     width: 100%;
-    height: 500px;
-    border: 1px solid rgba(0, 0, 0, .1);
-    margin-top: 10px;">
-  <p style="
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);">
-    Appear area
-  </p>
+    height: 300px;
+    border: 1px solid rgba(128, 128, 128, .2);
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  "
+>
+  Target Area
 </div>
-<n-drawer v-model="active" :width="200" :placement="placement" :target="target">
+<n-drawer
+  v-model="active"
+  :width="200"
+  :height="200"
+  :placement="placement" 
+  :target="target"
+>
   <n-h1>Stoner</n-h1>
   <n-p>Stoner is a 1965 novel by the American writer John Williams.</n-p>
 </n-drawer>

demo/documentation/components/drawer/zhCN/index.md

@@ -26,7 +26,7 @@ dark-4-debug
 |height|`number \| string`|`251`|在位置是 `top` 和 `bottom` 时生效|
 |mask-closable|`boolean`|`true`|点击遮罩时是否发出 `hide` 事件|
 |drawer-style|`object`|`null`||
-|target|`() => HTMLElement`|`undefined`|抽屉出现的区域|
+|target|`() => HTMLElement`|`() => document.body`|抽屉出现的区域|
 |drawer-class|`string`|`null`||
 
 ## Slots

demo/documentation/components/drawer/zhCN/target.md

@@ -8,20 +8,26 @@
 </n-button-group>
 <div 
   ref="target"
-  style="position:relative;
+  style="
+    position:relative;
     width: 100%;
-    height: 500px;
-    border: 1px solid rgba(0, 0, 0, .1);
-    margin-top: 10px;"
+    height: 300px;
+    border: 1px solid rgba(128, 128, 128, .2);
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  "
 >
-  <p style="position:absolute;
-      top:50%;
-      left:50%;
-      transform: translate(-50%, -50%);">
-    显示区域
-  </p>
+  显示区域
 </div>
-<n-drawer v-model="active" :width="200" :placement="placement" :target="target">
+<n-drawer
+  v-model="active"
+  :width="200"
+  :height="200"
+  :placement="placement" 
+  :target="target"
+>
   <n-h1>斯通纳</n-h1>
   <n-p>《斯通纳》是美国作家约翰·威廉姆斯在 1965 年出版的小说。</n-p>
 </n-drawer>

src/Drawer/src/main.vue

@@ -1,11 +1,11 @@
 <template>
-  <n-base-portal ref="portal" :transfer-target="target">
+  <n-base-portal
+    ref="portal"
+    :transfer-target="target"
+  >
     <div
       ref="contentContainer"
       class="n-positioning-container"
-      :class="{
-        'n-positioning-container--absolute': target
-      }"
     >
       <div
         class="n-drawer-container"
@@ -95,10 +95,9 @@ export default {
       type: String,
       default: null
     },
-    /** Todo */
     target: {
       type: Function,
-      default: undefined
+      default: () => document.body
     }
   },
   data () {

styles/base.scss

@@ -15,8 +15,14 @@ input {
   font-size: inherit;
 }
 
+body > {
+  @include b(positioning-container) {
+    position: fixed;
+  }
+}
+
 @include b(positioning-container) {
-  position: fixed;
+  position: absolute;
   left: 0;
   right: 0;
   top: 0;
@@ -26,19 +32,4 @@ input {
   @include b(positioning-content) {
     pointer-events: all;
   }
-  @include m(absolute) {
-    position: absolute;
-  }
-}
-
-@include b(modal-content) {
-  @include b(positioning-container) {
-    position: absolute;
-  }
-}
-
-@include b(drawer) {
-  @include b(positioning-container) {
-    position: absolute;
-  }
 }