diff --git a/devui/drawer/index.ts b/devui/drawer/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..38320901dd171d30a614da4ed0f3ae3527f986dd
--- /dev/null
+++ b/devui/drawer/index.ts
@@ -0,0 +1,18 @@
+import type { App } from 'vue'
+import Drawer from './src/drawer'
+
+Drawer.install = function(app: App): void {
+  app.component(Drawer.name, Drawer)
+}
+
+export { Drawer }
+
+export default {
+  title: 'Drawer 抽屉板',
+  category: '反馈',
+  status: '10%',
+  install(app: App): void {
+    
+    app.use(Drawer as any)
+  }
+}
diff --git a/devui/drawer/src/components/drawer-header-type.ts b/devui/drawer/src/components/drawer-header-type.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c76ce1c22bb7946ebef2412407165ec70f4006cf
--- /dev/null
+++ b/devui/drawer/src/components/drawer-header-type.ts
@@ -0,0 +1,7 @@
+import type { ExtractPropTypes} from 'vue'
+
+export const drawerHeaderType = {
+
+} as const
+
+export type DrawerHeaderType = ExtractPropTypes<typeof drawerHeaderType>
diff --git a/devui/drawer/src/components/drawer-header.scss b/devui/drawer/src/components/drawer-header.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ee1776a5d0c509c4c34ffa85622c855f77adb1c8
--- /dev/null
+++ b/devui/drawer/src/components/drawer-header.scss
@@ -0,0 +1,11 @@
+@import '../drawer.scss';
+
+.devui-drawer-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+
+  & .devui-drawer-header-item + .devui-drawer-header-item {
+    padding-left: 12px;
+  }
+}
diff --git a/devui/drawer/src/components/drawer-header.tsx b/devui/drawer/src/components/drawer-header.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dac5705dcff0154288706743f28a90ad8b7f55e2
--- /dev/null
+++ b/devui/drawer/src/components/drawer-header.tsx
@@ -0,0 +1,42 @@
+import { defineComponent, toRefs, ref, reactive } from 'vue'
+import { drawerHeaderType, DrawerHeaderType } from './drawer-header-type';
+
+import './drawer-header.scss'
+
+export default defineComponent({
+  name: 'DrawerHeader', // 头部
+  props: drawerHeaderType,
+  emits: ['toggleFullScreen', 'close'],
+  setup(props: DrawerHeaderType, ctx) {
+    const isFullScreen = ref<boolean>(false);
+
+    const handleFullScreen = () => {
+      isFullScreen.value = !isFullScreen.value;
+      ctx.emit('toggleFullScreen');
+    }
+
+    const handleDrawerClose = () => {
+      ctx.emit('close')
+    }
+
+    return { isFullScreen, handleFullScreen, handleDrawerClose }
+  },
+  render() {
+    const { handleFullScreen, handleDrawerClose } = this
+    const isFullScreen: string = this.isFullScreen ? 'icon icon-minimize' : 'icon icon-maxmize'
+
+    return (
+      <div class="devui-drawer-header">
+        <div class="devui-drawer-header-item">
+          <span class="devui-drawer-header-item icon icon-more-operate" />
+        </div>
+        <div class="devui-drawer-header-item" onClick={handleFullScreen}>
+          <span class={isFullScreen}/>
+        </div>
+        <div class="devui-drawer-header-item" onClick={handleDrawerClose}>
+          <span class="icon icon-close" />
+        </div>
+      </div>
+    )
+  }
+})
diff --git a/devui/drawer/src/drawer-types.ts b/devui/drawer/src/drawer-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..196744401fb96b7fc02f4249a8c9c2bf533ae6be
--- /dev/null
+++ b/devui/drawer/src/drawer-types.ts
@@ -0,0 +1,14 @@
+import type { ExtractPropTypes } from 'vue'
+
+export const drawerProps = {
+  width: {
+    type: String,
+    default: '300px',
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  }
+} as const
+
+export type DrawerProps = ExtractPropTypes<typeof drawerProps>
diff --git a/devui/drawer/src/drawer.scss b/devui/drawer/src/drawer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..dadc3f86bafb490076fffdd4fe71d567da41d166
--- /dev/null
+++ b/devui/drawer/src/drawer.scss
@@ -0,0 +1,46 @@
+@import '../../style/devui.scss';
+
+.devui-drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+}
+
+.devui-overlay-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
+.devui-overlay-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: $devui-shadow;
+  width: 100vw;
+  height: 100vh;
+}
+
+.devui-drawer-nav,
+.devui-drawer-content {
+  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;
+  overflow: auto;
+  box-shadow: $devui-shadow-length-fullscreen-overlay $devui-shadow;
+  padding: 20px;
+}
diff --git a/devui/drawer/src/drawer.tsx b/devui/drawer/src/drawer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d60c77690a8baeca146c3b83ad783bbbbab2f345
--- /dev/null
+++ b/devui/drawer/src/drawer.tsx
@@ -0,0 +1,57 @@
+import { defineComponent, ref, toRefs } from 'vue'
+import { drawerProps, DrawerProps } from './drawer-types'
+
+import DrawerHeader from './components/drawer-header'
+
+import './drawer.scss'
+
+export default defineComponent({
+  name: 'DDrawer',
+  props: drawerProps,
+  emits: ['close', 'update:visible'],
+  setup(props: DrawerProps, ctx) {
+    const { width, visible } = toRefs(props); // 宽度
+    const ZIndex = ref<number>(1000); // z-index
+    const isFullScreen = ref(false);
+
+    const fullScreenEvent = () => {
+      isFullScreen.value = !isFullScreen.value;
+    }
+
+    const closeDrawer = () => {
+      ctx.emit('update:visible', false);
+      ctx.emit('close');
+    }
+    
+    return {
+      ZIndex,
+      isFullScreen,
+      width,
+      visible,
+      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;
+
+    if (!this.visible) return;
+
+    return (
+      <div class="devui-drawer" style={{ zIndex: zindex }}>
+        {/* 越后面的元素层级越高？ */}
+        <div class="devui-overlay-backdrop" />
+        <div class="devui-overlay-wrapper" >
+          <div class="devui-drawer-nav" style={{ 'left': 0, 'width': width }}>
+            <div class="devui-drawer-content">
+              <DrawerHeader onToggleFullScreen={fullScreenEvent} onClose={ closeDrawer }/>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+})
diff --git a/docs/components/drawer/index.md b/docs/components/drawer/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..7278248f8bbe21757dfee1f4f9c6799a184f0c67
--- /dev/null
+++ b/docs/components/drawer/index.md
@@ -0,0 +1,60 @@
+# Drawer 抽屉板
+
+屏幕边缘滑出的浮层面板组件。
+
+### 何时使用
+
+1. 抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。
+2. 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
+3. 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。
+
+### 基本用法
+
+<h4>基本用法，可以控制全屏、关闭和设置宽度。</h4>
+
+:::demo
+
+```vue
+<template>
+  <d-button  @click="drawerShow"> drawer {{ btnName }} </d-button>
+  <d-drawer v-model:visible="isDrawerShow" :width="drawerWidth" @close="drawerClose">
+</template>
+<script>
+import { ref } from 'vue'
+
+export default ({
+  setup() {
+    let isDrawerShow = ref(false)
+    let btnName = ref('close')
+    let drawerWidth = ref('15vw')
+
+    const drawerShow = () => {
+      isDrawerShow.value = true
+      btnName.value = 'open'
+    }
+
+    const drawerClose = () => {
+      btnName.value = 'close'
+      
+    }
+    return {
+      isDrawerShow,
+      btnName,
+      drawerWidth,
+      drawerShow,
+      drawerClose,
+    }
+  }
+})
+</script>
+```
+
+:::
+
+### 参数及API
+
+| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
+| :---------: | :------: | :-------: | :----------------------- | --------------------------------- |
+| visible | `Boolean` | `false` | 必选，设置抽屉板是否可见 | [基本用法](###基本用法) |
+| width | `String` | `300px` | 可选，设置抽屉板宽度 | [基本用法](###基本用法) |
+| onClose | `Function` | -- | 可选，关闭 drawer 时候调用 |[基本用法](###基本用法) |
\ No newline at end of file