diff --git a/devui/drawer/index.ts b/devui/drawer/index.ts
index 38320901dd171d30a614da4ed0f3ae3527f986dd..342b0f9339b9c656d2172ba98d83a917b371bd4c 100644
--- a/devui/drawer/index.ts
+++ b/devui/drawer/index.ts
@@ -10,7 +10,7 @@ export { Drawer }
 export default {
   title: 'Drawer 抽屉板',
   category: '反馈',
-  status: '10%',
+  status: '30%',
   install(app: App): void {
     
     app.use(Drawer as any)
diff --git a/devui/drawer/src/components/drawer-header.tsx b/devui/drawer/src/components/drawer-header.tsx
index dac5705dcff0154288706743f28a90ad8b7f55e2..6866744bd0ccf0c9176d2745b2f62b23aa5f9342 100644
--- a/devui/drawer/src/components/drawer-header.tsx
+++ b/devui/drawer/src/components/drawer-header.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, ref, reactive } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { drawerHeaderType, DrawerHeaderType } from './drawer-header-type';
 
 import './drawer-header.scss'
@@ -10,7 +10,8 @@ export default defineComponent({
   setup(props: DrawerHeaderType, ctx) {
     const isFullScreen = ref<boolean>(false);
 
-    const handleFullScreen = () => {
+    const handleFullScreen = (e) => {
+      e.stopPropagation();
       isFullScreen.value = !isFullScreen.value;
       ctx.emit('toggleFullScreen');
     }
diff --git a/devui/drawer/src/drawer-types.ts b/devui/drawer/src/drawer-types.ts
index 8e166033f9e5103968008a6685b198c53f454de5..9cdc51e6ef1c27fb98b5b2bfb5880f838e20ff44 100644
--- a/devui/drawer/src/drawer-types.ts
+++ b/devui/drawer/src/drawer-types.ts
@@ -1,4 +1,4 @@
-import type { ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 
 export const drawerProps = {
   width: {
@@ -21,6 +21,10 @@ export const drawerProps = {
     type: Boolean,
     default: true,
   },
+  position: {
+    type: String as PropType<'left' | 'right'>,
+    default: 'left',
+  },
 } as const
 
 export type DrawerProps = ExtractPropTypes<typeof drawerProps>
diff --git a/devui/drawer/src/drawer.scss b/devui/drawer/src/drawer.scss
index dadc3f86bafb490076fffdd4fe71d567da41d166..43b2615cf098bb588cfdf62fea1924f44b5c2f33 100644
--- a/devui/drawer/src/drawer.scss
+++ b/devui/drawer/src/drawer.scss
@@ -14,6 +14,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
+  width: 100vw;
 }
 
 .devui-overlay-backdrop {
@@ -25,22 +26,18 @@
   height: 100vh;
 }
 
-.devui-drawer-nav,
-.devui-drawer-content {
+.devui-drawer-nav {
   position: absolute;
   top: 0;
   bottom: 0;
   border-radius: $devui-border-radius;
-}
-
-.devui-drawer-nav {
   background: $devui-base-bg;
 }
 
 .devui-drawer-content {
-  left: 0;
-  right: 0;
+  border-radius: $devui-border-radius;
   overflow: auto;
   box-shadow: $devui-shadow-length-fullscreen-overlay $devui-shadow;
   padding: 20px;
+  height: 100vh;
 }
diff --git a/devui/drawer/src/drawer.tsx b/devui/drawer/src/drawer.tsx
index 5791d89bc2367d9ae43f192b79047c29fd23278b..c4af5fb47ee5d88e561042f8a38b1d175c954b31 100644
--- a/devui/drawer/src/drawer.tsx
+++ b/devui/drawer/src/drawer.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, ref, toRefs, watch } from 'vue'
+import { defineComponent, ref, toRefs, watch, computed } from 'vue'
 import { drawerProps, DrawerProps } from './drawer-types'
 
 import DrawerHeader from './components/drawer-header'
@@ -11,9 +11,12 @@ export default defineComponent({
   props: drawerProps,
   emits: ['close', 'update:visible', 'afterOpened'],
   setup(props: DrawerProps, { emit, slots }) {
-    const { width, visible, zIndex, isCover, escKeyCloseable } = toRefs(props); // 宽度
+    const { width, visible, zIndex, isCover, escKeyCloseable, position } = toRefs(props); // 宽度
     const isFullScreen = ref(false);
 
+    const navWidth = computed(() => isFullScreen.value ? '100vw' : width.value );
+    const navRight = computed(() => position.value === 'right' ? { 'right': 0 } : {'left' : 0} );
+
     const fullScreenEvent = () => {
       isFullScreen.value = !isFullScreen.value;
     }
@@ -43,29 +46,29 @@ export default defineComponent({
     return {
       zIndex,
       isFullScreen,
-      width,
+      navWidth,
       visible,
       slots,
       isCover,
+      navRight,
       fullScreenEvent,
       closeDrawer, 
     };
   },
   render() {
     const zindex: number = this.zIndex;
-    const width: number = this.isFullScreen ? '100vw' : this.width;
     const fullScreenEvent: any = this.fullScreenEvent;
     const closeDrawer: any = this.closeDrawer;
     const isCover: boolean = this.isCover;
+    const navRight: Record<string, unknown> = this.navRight;
 
     if (!this.visible) return;
 
     return (
-      <div class="devui-drawer" style={{ zIndex: zindex }}>
-        {/* TODO : 有遮罩层时才能点击关闭 onClick={ closeDrawer }*/}
+      <div class="devui-drawer" style={{ zIndex: zindex }} onClick={ closeDrawer }>
         {isCover ? <div class="devui-overlay-backdrop"/>: ''}
-        <div class="devui-overlay-wrapper" >
-          <div class="devui-drawer-nav" style={{ 'left': 0, 'width': width }}>
+        <div class="devui-overlay-wrapper">
+          <div class="devui-drawer-nav" style={{ 'width': this.navWidth, ...navRight}}>
             <div class="devui-drawer-content">
               <DrawerHeader onToggleFullScreen={fullScreenEvent} onClose={closeDrawer} />
               <div> { this.slots.default ? this.slots.default() : <DrawerContainer/>} </div>
diff --git a/docs/components/drawer/index.md b/docs/components/drawer/index.md
index f2ff96f2bd268a6a9eedb07b72b3946ae58bb283..51f64f2f11b91f84dad04de4ea526e60744391de 100644
--- a/docs/components/drawer/index.md
+++ b/docs/components/drawer/index.md
@@ -20,6 +20,7 @@
   <d-drawer 
     v-model:visible="isDrawerShow" 
     :width="drawerWidth" 
+    position="right"
     @close="drawerClose"
     @afterOpened="drawerAfterOpened"
   />
@@ -71,3 +72,4 @@ export default ({
 | onClose | `Function` | -- | 可选，关闭 drawer 时候调用 | [基本用法](#基本用法) |
 | escKeyCloseable | `Boolean` | `true` | 可选，设置可否通过 esc 按键来关闭 drawer 层 | [基本用法](#基本用法) |
 | afterOpened | `Function` | -- | 可选，打开 drawer 后时候调用 | [基本用法](#基本用法) |
+| position | `String` | 'right' | 可选，抽屉板出现的位置，'left'或者'right' | [基本用法](#基本用法) |