diff --git a/src/drawer/README.md b/src/drawer/README.md
index 00d741c24..a4a68acf1 100644
--- a/src/drawer/README.md
+++ b/src/drawer/README.md
@@ -18,9 +18,11 @@ isComponent: true
 ## 代码演示
 
 ### 基础抽屉
-```html
-<t-drawer visible="{{visible}}" sidebar="{{sidebar}}" bind:sidebar-item = "getSidebarItem"></t-drawer>
-```
+{{ base }}
+
+### 带图标的抽屉
+{{ icon-drawer }}
+
 >Drawer的 `visible` 是受控的，需要手动设置 `visible` 为 `true` 才会开启抽屉
 
 
diff --git a/src/drawer/_example/base/index.js b/src/drawer/_example/base/index.js
new file mode 100644
index 000000000..a0008f046
--- /dev/null
+++ b/src/drawer/_example/base/index.js
@@ -0,0 +1,51 @@
+Component({
+  data: {
+    placement: 'left',
+    baseSidebar: [
+      {
+        title: '菜单一',
+      },
+      {
+        title: '菜单二',
+      },
+      {
+        title: '菜单三',
+      },
+      {
+        title: '菜单四',
+      },
+      {
+        title: '菜单五',
+      },
+      {
+        title: '菜单六',
+      },
+      {
+        title: '菜单七',
+      },
+      {
+        title: '菜单八',
+      },
+    ],
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    openDrawerBase() {
+      this.setData({
+        visible: true,
+        sidebar: this.data.baseSidebar,
+      });
+    },
+
+    itemClick(e) {
+      console.log(e.detail);
+    },
+
+    overlayClick(e) {
+      console.log(e.detail);
+    },
+  },
+});
diff --git a/src/drawer/_example/base/index.json b/src/drawer/_example/base/index.json
new file mode 100644
index 000000000..467ce2945
--- /dev/null
+++ b/src/drawer/_example/base/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
diff --git a/src/drawer/_example/base/index.wxml b/src/drawer/_example/base/index.wxml
new file mode 100644
index 000000000..438775aec
--- /dev/null
+++ b/src/drawer/_example/base/index.wxml
@@ -0,0 +1,8 @@
+<t-button variant="plain" bind:tap="openDrawerBase" block>基础抽屉</t-button>
+<t-drawer
+  visible="{{visible}}"
+  placement="{{placement}}"
+  items="{{sidebar}}"
+  bind:overlay-click="overlayClick"
+  bind:item-click="itemClick"
+></t-drawer>
diff --git a/src/drawer/_example/base/index.wxss b/src/drawer/_example/base/index.wxss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/drawer/_example/drawer.json b/src/drawer/_example/drawer.json
index 0089269e5..098ea4515 100644
--- a/src/drawer/_example/drawer.json
+++ b/src/drawer/_example/drawer.json
@@ -2,6 +2,8 @@
   "navigationBarTitleText": "Drawer",
   "navigationBarBackgroundColor": "#fff",
   "usingComponents": {
-    "t-demo": "../../components/demo-block/index"
+    "t-demo": "../../components/demo-block/index",
+    "base": "./base",
+    "icon-drawer": "./icon-drawer"
   }
 }
diff --git a/src/drawer/_example/drawer.ts b/src/drawer/_example/drawer.ts
index 743af8dda..560d44d43 100644
--- a/src/drawer/_example/drawer.ts
+++ b/src/drawer/_example/drawer.ts
@@ -1,88 +1 @@
-Page({
-  data: {
-    placement: 'left',
-    sidebar: [],
-    baseSidebar: [
-      {
-        title: '菜单一',
-      },
-      {
-        title: '菜单二',
-      },
-      {
-        title: '菜单三',
-      },
-      {
-        title: '菜单四',
-      },
-      {
-        title: '菜单五',
-      },
-      {
-        title: '菜单六',
-      },
-      {
-        title: '菜单七',
-      },
-      {
-        title: '菜单八',
-      },
-    ],
-    iconSidebar: [
-      {
-        title: '菜单一',
-        icon: 'app',
-      },
-      {
-        title: '菜单二',
-        icon: 'app',
-      },
-      {
-        title: '菜单三',
-        icon: 'app',
-      },
-      {
-        title: '菜单四',
-        icon: 'app',
-      },
-      {
-        title: '菜单五',
-        icon: 'app',
-      },
-      {
-        title: '菜单六',
-        icon: 'app',
-      },
-      {
-        title: '菜单七',
-        icon: 'app',
-      },
-      {
-        title: '菜单八',
-        icon: 'app',
-      },
-    ],
-  },
-
-  openDrawerBase() {
-    this.setData({
-      visible: true,
-      sidebar: this.data.baseSidebar,
-    });
-  },
-
-  openDrawerIcon() {
-    this.setData({
-      visible: true,
-      sidebar: this.data.iconSidebar,
-    });
-  },
-
-  itemClick(e) {
-    console.log(e.detail);
-  },
-
-  overlayClick(e) {
-    console.log(e.detail);
-  },
-});
+Page({});
diff --git a/src/drawer/_example/drawer.wxml b/src/drawer/_example/drawer.wxml
index 10847406b..c78cbf2be 100644
--- a/src/drawer/_example/drawer.wxml
+++ b/src/drawer/_example/drawer.wxml
@@ -2,23 +2,12 @@
   <view class="demo-title">Drawer 弹出层</view>
   <view class="demo-desc">用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。</view>
   <view class="tdesign-demo-popup">
-    <t-drawer
-      visible="{{visible}}"
-      placement="{{placement}}"
-      items="{{sidebar}}"
-      bind:overlay-click="overlayClick"
-      bind:item-click="itemClick"
-    ></t-drawer>
     <t-demo title="01 类型">
       <view class="demo-section__desc">基础抽屉</view>
-      <view class="box">
-        <t-button variant="plain" bind:tap="openDrawerBase" block>基础抽屉</t-button>
-      </view>
+      <base />
 
       <view class="demo-section__desc">带图标抽屉</view>
-      <view class="box">
-        <t-button variant="plain" block bind:tap="openDrawerIcon">带图标抽屉</t-button>
-      </view>
+      <icon-drawer />
     </t-demo>
   </view>
 </view>
diff --git a/src/drawer/_example/icon-drawer/index.js b/src/drawer/_example/icon-drawer/index.js
new file mode 100644
index 000000000..8e87afe60
--- /dev/null
+++ b/src/drawer/_example/icon-drawer/index.js
@@ -0,0 +1,59 @@
+Component({
+  data: {
+    placement: 'left',
+    iconSidebar: [
+      {
+        title: '菜单一',
+        icon: 'app',
+      },
+      {
+        title: '菜单二',
+        icon: 'app',
+      },
+      {
+        title: '菜单三',
+        icon: 'app',
+      },
+      {
+        title: '菜单四',
+        icon: 'app',
+      },
+      {
+        title: '菜单五',
+        icon: 'app',
+      },
+      {
+        title: '菜单六',
+        icon: 'app',
+      },
+      {
+        title: '菜单七',
+        icon: 'app',
+      },
+      {
+        title: '菜单八',
+        icon: 'app',
+      },
+    ],
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    openDrawerIcon() {
+      this.setData({
+        visible: true,
+        sidebar: this.data.iconSidebar,
+      });
+    },
+
+    itemClick(e) {
+      console.log(e.detail);
+    },
+
+    overlayClick(e) {
+      console.log(e.detail);
+    },
+  },
+});
diff --git a/src/drawer/_example/icon-drawer/index.json b/src/drawer/_example/icon-drawer/index.json
new file mode 100644
index 000000000..467ce2945
--- /dev/null
+++ b/src/drawer/_example/icon-drawer/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
diff --git a/src/drawer/_example/icon-drawer/index.wxml b/src/drawer/_example/icon-drawer/index.wxml
new file mode 100644
index 000000000..11a38852d
--- /dev/null
+++ b/src/drawer/_example/icon-drawer/index.wxml
@@ -0,0 +1,8 @@
+<t-button variant="plain" block bind:tap="openDrawerIcon">带图标抽屉</t-button>
+<t-drawer
+  visible="{{visible}}"
+  placement="{{placement}}"
+  items="{{sidebar}}"
+  bind:overlay-click="overlayClick"
+  bind:item-click="itemClick"
+></t-drawer>
diff --git a/src/drawer/_example/icon-drawer/index.wxss b/src/drawer/_example/icon-drawer/index.wxss
new file mode 100644
index 000000000..e69de29bb