diff --git a/script/generate-usage/config.js b/script/generate-usage/config.js
index ce6c230fd..11360214f 100644
--- a/script/generate-usage/config.js
+++ b/script/generate-usage/config.js
@@ -624,7 +624,8 @@ module.exports = {
       drawer: `
         <div>
           <t-button @click="handleClick">Open Drawer</t-button>
-          <t-drawer v-bind="configProps" :visible.sync="visible" header="header">
+          <t-drawer v-bind="configProps" :visible.sync="visible">
+            <template #header>header</template>
             <p>This is a Drawer</p>
           </t-drawer>
         </div>
diff --git a/src/drawer/_usage/index.vue b/src/drawer/_usage/index.vue
index a1b424588..8dd83d17d 100644
--- a/src/drawer/_usage/index.vue
+++ b/src/drawer/_usage/index.vue
@@ -4,7 +4,8 @@
     <template #drawer="{ configProps }">
       <div>
         <t-button @click="handleClick">Open Drawer</t-button>
-        <t-drawer v-bind="configProps" :visible.sync="visible" header="header">
+        <t-drawer v-bind="configProps" :visible.sync="visible">
+          <template #header>header</template>
           <p>This is a Drawer</p>
         </t-drawer>
       </div>
@@ -26,7 +27,7 @@ const panelList = [{ label: 'drawer', value: 'drawer' }];
 
 const usageCodeMap = {
   drawer:
-    '\n        <div>\n          <t-button @click="handleClick">Open Drawer</t-button>\n          <t-drawer v-bind="configProps" :visible.sync="visible" header="header">\n            <p>This is a Drawer</p>\n          </t-drawer>\n        </div>\n      ',
+    '\n        <div>\n          <t-button @click="handleClick">Open Drawer</t-button>\n          <t-drawer v-bind="configProps" :visible.sync="visible">\n            <template #header>header</template>\n            <p>This is a Drawer</p>\n          </t-drawer>\n        </div>\n      ',
 };
 const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);