feat(Notification): add Hook demo

Author: CCherry07

components/notification/demo/hook.vue

@@ -0,0 +1,61 @@
+<docs>
+---
+order: 10
+title:
+  zh-CN: Hooks 调用（推荐）
+  en-US: Hooks Usage (Recommend)
+---
+
+## zh-CN
+
+通过 `notification.useNotification` 创建支持读取 context 的 `contextHolder`。请注意，我们推荐通过顶层注册的方式代替 `message` 静态方法，因为静态方法无法消费上下文，因而 ConfigProvider 的数据也不会生效。
+
+## en-US
+
+Use `notification.useNotification` to get `contextHolder` with context accessible issue. Please note that, we recommend to use top level registration instead of `notification` static method, because static method cannot consume context, and ConfigProvider data will not work.
+
+</docs>
+<template>
+  <a-space>
+    <a-button type="primary" @click="() => open('topLeft')">
+      <RadiusUpleftOutlined />
+      topLeft
+    </a-button>
+    <a-button type="primary" @click="() => open('topRight')">
+      <RadiusUprightOutlined />
+      topRight
+    </a-button>
+  </a-space>
+  <a-divider />
+  <a-space>
+    <a-button type="primary" @click="() => open('bottomLeft')">
+      <RadiusBottomleftOutlined />
+      bottomLeft
+    </a-button>
+    <a-button type="primary" @click="() => open('bottomRight')">
+      <RadiusBottomrightOutlined />
+      bottomRight
+    </a-button>
+  </a-space>
+  <contextHolder />
+</template>
+
+<script lang="ts" setup>
+import {
+  RadiusBottomleftOutlined,
+  RadiusBottomrightOutlined,
+  RadiusUpleftOutlined,
+  RadiusUprightOutlined,
+} from '@ant-design/icons-vue';
+import { NotificationPlacement, notification } from 'ant-design-vue';
+const [api, contextHolder] = notification.useNotification();
+const open = (placement: NotificationPlacement) => openNotification(placement);
+const openNotification = (placement: NotificationPlacement) => {
+  api.info({
+    message: `Notification ${placement}`,
+    description:
+      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
+    placement,
+  });
+};
+</script>

components/notification/demo/index.vue

@@ -1,5 +1,6 @@
 <template>
   <demo-sort>
+    <hook />
     <basic />
     <duratioin />
     <with-icon />
@@ -12,6 +13,7 @@
 </template>
 <script lang="ts">
 import Basic from './basic.vue';
+import Hook from './hook.vue';
 import Duratioin from './duration.vue';
 import WithIcon from './with-icon.vue';
 import CustomIcon from './custom-icon.vue';
@@ -35,6 +37,7 @@ export default defineComponent({
     CustomStyle,
     Placement,
     Update,
+    Hook,
   },
   setup() {
     return {};