feat(Message): add Hook demo

Author: CCherry07

components/message/demo/hook.vue

@@ -0,0 +1,31 @@
+<docs>
+---
+order: 10
+title:
+  zh-CN: Hooks 调用（推荐）
+  en-US: Hooks Usage (Recommend)
+---
+
+## zh-CN
+
+通过 `message.useMessage` 创建支持读取 context 的 `contextHolder`。请注意，我们推荐通过顶层注册的方式代替 `message` 静态方法，因为静态方法无法消费上下文，因而 ConfigProvider 的数据也不会生效。
+
+## en-US
+
+Use `message.useMessage` to get `contextHolder` with context accessible issue. Please note that, we recommend to use top level registration instead of `message` static method, because static method cannot consume context, and ConfigProvider data will not work.
+
+</docs>
+
+<template>
+  <contextHolder />
+  <a-button type="primary" @click="info">Display normal message</a-button>
+</template>
+
+<script lang="ts" setup>
+import { message } from 'ant-design-vue';
+const [messageApi, contextHolder] = message.useMessage();
+
+const info = () => {
+  messageApi.info('Hello, Ant Design!');
+};
+</script>

components/message/demo/index.vue

@@ -1,5 +1,6 @@
 <template>
   <demo-sort>
+    <Hook />
     <info />
     <duration />
     <other />
@@ -20,6 +21,7 @@ import customStyleVue from './custom-style.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 import { defineComponent } from 'vue';
+import Hook from './hook.vue';
 export default defineComponent({
   CN,
   US,
@@ -31,6 +33,7 @@ export default defineComponent({
     Thenable,
     Update,
     customStyleVue,
+    Hook,
   },
   setup() {
     return {};