diff --git a/doc/demos/message/dialog/closingControl.vue b/doc/demos/message/dialog/closingControl.vue
new file mode 100644
index 00000000..cf556c6a
--- /dev/null
+++ b/doc/demos/message/dialog/closingControl.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useDialog } from 'shuimo-ui';
+
+const { visible, closeDialog } = useDialog();
+</script>
+
+<template>
+
+  <m-dialog v-model:visible="visible" :close-btn="false">
+    <template #active>
+      <m-button>点击显示弹窗</m-button>
+    </template>
+    <div><m-button @click="closeDialog">关闭</m-button></div>
+  </m-dialog>
+
+</template>
+
+<style scoped>
+
+</style>
diff --git a/doc/i18n/components/message.ts b/doc/i18n/components/message.ts
index 2da3f540..adc0462b 100644
--- a/doc/i18n/components/message.ts
+++ b/doc/i18n/components/message.ts
@@ -20,6 +20,7 @@ export const message = {
     '点击控制': 'Click Control',
     '普通悬浮提示': 'Basic Tooltip',
     '普通确认框': 'Basic Confirm',
+    '控制关闭': 'Closing Control',
   },
   zh: {
     '普通弹窗': '普通弹窗',
@@ -33,6 +34,6 @@ export const message = {
     '点击控制': '点击控制',
     '普通悬浮提示': '普通悬浮提示',
     '普通确认框': '普通确认框',
-
+    '控制关闭': '控制关闭',
   },
 };
diff --git a/doc/pages/docs/components/message/dialog.md b/doc/pages/docs/components/message/dialog.md
index 8143395d..0b94744a 100644
--- a/doc/pages/docs/components/message/dialog.md
+++ b/doc/pages/docs/components/message/dialog.md
@@ -12,6 +12,10 @@
 
 ::: demo message/dialog/height
 
+### {{$t(\'控制关闭\')}}
+
+::: demo message/dialog/closingControl
+
 ## API
 
 ::: api message/dialog