docs(drawer): 增加抽屉组件对插槽使用的用例 (#766)

* docs(drawer): 增加抽屉组件对插槽使用的用例

* docs(drawer): 为用例增加一些实际的应用场景

src/drawer/demos/enUS/index.demo-entry.md

@@ -9,6 +9,7 @@ basic
 multiple
 target
 closable
+slot
 ```
 
 ## Props

src/drawer/demos/enUS/slot.demo.md

@@ -0,0 +1,48 @@
+# Custom header and bottom information
+
+```html
+<n-button-group>
+  <n-button @click="activate">Open</n-button>
+</n-button-group>
+<n-drawer v-model:show="active" :width="502">
+  <n-drawer-content>
+    <template #header>
+      <n-tabs v-model:value="tabsActive" @update:value="updateValue">
+        <n-tab-pane name="messages" tab="Messages" />
+        <n-tab-pane name="notifications" tab="Notifications" />
+      </n-tabs>
+    </template>
+    <template #footer>
+      <n-button>Mark all as read</n-button>
+    </template>
+    <p v-if="tabsActive === 'messages'">Message content</p>
+    <p v-else>Notification content</p>
+  </n-drawer-content>
+</n-drawer>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const active = ref(false)
+    const tabsActive = ref('messages')
+
+    const activate = () => {
+      active.value = true
+    }
+
+    const updateValue = (e) => {
+      console.log(e)
+    }
+
+    return {
+      active,
+      tabsActive,
+      activate,
+      updateValue
+    }
+  }
+})
+```

src/drawer/demos/zhCN/index.demo-entry.md

@@ -9,6 +9,7 @@ basic
 multiple
 target
 closable
+slot
 custom-style-debug
 dark-1-debug
 dark-2-debug

src/drawer/demos/zhCN/slot.demo.md

@@ -0,0 +1,48 @@
+# 自定义头部和底部信息
+
+```html
+<n-button-group>
+  <n-button @click="activate">打开</n-button>
+</n-button-group>
+<n-drawer v-model:show="active" :width="502">
+  <n-drawer-content>
+    <template #header>
+      <n-tabs v-model:value="tabsActive" @update:value="updateValue">
+        <n-tab-pane name="messages" tab="消息" />
+        <n-tab-pane name="notifications" tab="通知" />
+      </n-tabs>
+    </template>
+    <template #footer>
+      <n-button>全部标记为已读</n-button>
+    </template>
+    <p v-if="tabsActive === 'messages'">消息内容</p>
+    <p v-else>通知内容</p>
+  </n-drawer-content>
+</n-drawer>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const active = ref(false)
+    const tabsActive = ref('messages')
+
+    const activate = () => {
+      active.value = true
+    }
+
+    const updateValue = (e) => {
+      console.log(e)
+    }
+
+    return {
+      active,
+      tabsActive,
+      activate,
+      updateValue
+    }
+  }
+})
+```