refactor(drawer): body-class => class & body-style => style

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

@@ -14,8 +14,6 @@ target
 
 | Name | Parameters | Default | Description |
 | --- | --- | --- | --- |
-| body-class | `string` | `undefined` |  |
-| body-style | `Object` | `undefined` |  |
 | height | `number \| string` | `251` | Works when placement is `top` and `bottom`. |
 | native-scrollbar | `boolean` | `true` |  |
 | mask-closable | `boolean` | `true` | Whether to emit `hide` event when click mask. |

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

@@ -18,8 +18,6 @@ dark-4-debug
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| body-class | `string` | `undefined` |  |
-| body-style | `Object` | `undefined` |  |
 | height | `number \| string` | `251` | 在位置是 `top` 和 `bottom` 时生效 |
 | mask-closable | `boolean` | `true` | 点击遮罩时是否发出 `update:show` 事件 |
 | native-scrollbar | `boolean` | `true` |  |

src/drawer/src/Drawer.vue

@@ -11,9 +11,10 @@
         <div v-if="show" class="n-drawer-mask" @click="handleMaskClick" />
       </transition>
       <n-drawer-body-wrapper
+        v-bind="$attrs"
+        :class="[$attrs.class, drawerClass]"
+        :style="[mergedBodyStyle, $attrs.style]"
         :placement="placement"
-        :body-style="mergedBodyStyle"
-        :body-class="compitableBodyClass"
         :scrollbar-props="scrollbarProps"
         :show="show"
         :display-directive="displayDirective"
@@ -29,7 +30,7 @@
 <script>
 import { VLazyTeleport } from 'vueuc'
 import { zindexable } from 'vdirs'
-import { useCompitable, useIsMounted } from 'vooks'
+import { useIsMounted } from 'vooks'
 import { configurable, themeable, withCssr } from '../../_mixins'
 import { warn, formatLength } from '../../_utils'
 import NDrawerBodyWrapper from './DrawerBodyWrapper.vue'
@@ -51,6 +52,7 @@ export default {
       NModal: null
     }
   },
+  inheritAttrs: false,
   props: {
     show: {
       type: Boolean,
@@ -74,14 +76,6 @@ export default {
       type: Boolean,
       default: true
     },
-    bodyClass: {
-      type: String,
-      default: undefined
-    },
-    bodyStyle: {
-      type: Object,
-      default: undefined
-    },
     to: {
       type: [String, Object],
       default: undefined
@@ -156,8 +150,6 @@ export default {
   },
   setup (props) {
     return {
-      compitableBodyClass: useCompitable(props, ['drawerClass', 'bodyClass']),
-      compitableBodyStyle: useCompitable(props, ['drawerStyle', 'bodyStyle']),
       isMounted: useIsMounted()
     }
   },
@@ -180,7 +172,7 @@ export default {
       return {
         width: this.styleWidth,
         height: this.styleHeight,
-        ...this.compitableBodyStyle
+        ...this.drawerStyle
       }
     }
   },

src/drawer/src/DrawerBodyWrapper.vue

@@ -13,15 +13,15 @@
         v-show="show"
         ref="bodyRef"
         class="n-drawer"
+        v-bind="$attrs"
         :class="[
-          bodyClass,
+          $attrs.class,
           `n-drawer--${placement}-placement`,
           {
             [`n-drawer--native-scrollbar`]: nativeScrollbar,
             [`n-${theme}-theme`]: theme
           }
         ]"
-        :style="bodyStyle"
       >
         <template v-if="nativeScrollbar">
           <slot />
@@ -58,19 +58,12 @@ export default {
       default: null
     }
   },
+  inheritAttrs: false,
   props: {
     theme: {
       type: String,
       default: undefined
     },
-    bodyStyle: {
-      type: Object,
-      default: undefined
-    },
-    bodyClass: {
-      type: String,
-      default: undefined
-    },
     show: {
       type: Boolean,
       default: undefined