From 02ebc7b53bb158647362e2a70fe2f783f87841cd Mon Sep 17 00:00:00 2001
From: James <72028410+James-9696@users.noreply.github.com>
Date: Thu, 24 Oct 2024 01:47:04 -0700
Subject: [PATCH] fix(dialog-box): [dialog-box] modify dialog-box of demo
 design bug (#2382)

* fix(dialog-box): [dialog-box] modify dialog-box of design

* fix: modify demo

* fix: modify review code
---
 .../pc/app/dialog-box/hidden-header-composition-api.vue   | 8 +++++++-
 examples/sites/demos/pc/app/dialog-box/hidden-header.vue  | 8 +++++++-
 .../pc/app/dialog-box/lock-scroll-composition-api.vue     | 8 ++++----
 examples/sites/demos/pc/app/dialog-box/lock-scroll.vue    | 8 ++++----
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/examples/sites/demos/pc/app/dialog-box/hidden-header-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/hidden-header-composition-api.vue
index fb34be90be..e68c91d659 100644
--- a/examples/sites/demos/pc/app/dialog-box/hidden-header-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/hidden-header-composition-api.vue
@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true">无标题</tiny-button>
     <tiny-dialog-box :show-header="false" v-model:visible="boxVisibility" title="消息" width="30%">
-      <span>隐藏弹窗的标题部分</span>
+      <div class="body-class">隐藏弹窗的标题部分</div>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>
@@ -16,3 +16,9 @@ import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 </script>
+
+<style scoped>
+.body-class {
+  margin-top: 32px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dialog-box/hidden-header.vue b/examples/sites/demos/pc/app/dialog-box/hidden-header.vue
index e5dd46a0ea..7b88a46e9c 100644
--- a/examples/sites/demos/pc/app/dialog-box/hidden-header.vue
+++ b/examples/sites/demos/pc/app/dialog-box/hidden-header.vue
@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true">无标题</tiny-button>
     <tiny-dialog-box :show-header="false" v-model:visible="boxVisibility" title="消息" width="30%">
-      <span>隐藏弹窗的标题部分</span>
+      <div class="body-class">隐藏弹窗的标题部分</div>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>
@@ -25,3 +25,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.body-class {
+  margin-top: 32px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dialog-box/lock-scroll-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/lock-scroll-composition-api.vue
index 3af8d7344d..b4fdfff75f 100644
--- a/examples/sites/demos/pc/app/dialog-box/lock-scroll-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/lock-scroll-composition-api.vue
@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="openDlg(true)" type="info">允许滚动背景</tiny-button>
     <tiny-button @click="openDlg(false)">不允许滚动背景</tiny-button>
-    <tiny-dialog-box :lock-scroll="false" v-model:visible="visible1" title="消息" width="30%">
+    <tiny-dialog-box :lock-scroll="false" v-model:visible="visible1" title="消息" width="30%" @close="closeDlg(true)">
       <span>允许被遮罩内容的滚动</span>
       <template #footer>
         <tiny-button type="primary" @click="closeDlg(true)">确 定</tiny-button>
@@ -27,10 +27,11 @@ const visible2 = ref(false)
 function openDlg(isScroll) {
   if (isScroll) {
     document.body.style.overflow = 'auto'
-    document.body.style.height = '200vh'
+    document.body.style.height = '130vh'
     visible1.value = true
   } else {
-    document.body.style.height = '200vh'
+    document.body.style.overflow = 'hidden'
+    document.body.style.height = '100vh'
     visible2.value = true
   }
 }
@@ -41,7 +42,6 @@ function closeDlg(isScroll) {
     document.body.style.height = '100vh'
     visible1.value = false
   } else {
-    document.body.style.height = '100vh'
     visible2.value = false
   }
 }
diff --git a/examples/sites/demos/pc/app/dialog-box/lock-scroll.vue b/examples/sites/demos/pc/app/dialog-box/lock-scroll.vue
index 366dff9c56..4dbfd3b76d 100644
--- a/examples/sites/demos/pc/app/dialog-box/lock-scroll.vue
+++ b/examples/sites/demos/pc/app/dialog-box/lock-scroll.vue
@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="openDlg(true)" type="info">允许滚动背景</tiny-button>
     <tiny-button @click="openDlg(false)">不允许滚动背景</tiny-button>
-    <tiny-dialog-box :lock-scroll="false" v-model:visible="visible1" title="消息" width="30%">
+    <tiny-dialog-box :lock-scroll="false" v-model:visible="visible1" title="消息" width="30%" @close="closeDlg(true)">
       <span>允许被遮罩内容的滚动</span>
       <template #footer>
         <tiny-button type="primary" @click="closeDlg(true)">确 定</tiny-button>
@@ -35,10 +35,11 @@ export default {
     openDlg(isScroll) {
       if (isScroll) {
         document.body.style.overflow = 'auto'
-        document.body.style.height = '200vh'
+        document.body.style.height = '130vh'
         this.visible1 = true
       } else {
-        document.body.style.height = '200vh'
+        document.body.style.overflow = 'hidden'
+        document.body.style.height = '100vh'
         this.visible2 = true
       }
     },
@@ -48,7 +49,6 @@ export default {
         document.body.style.height = '100vh'
         this.visible1 = false
       } else {
-        document.body.style.height = '100vh'
         this.visible2 = false
       }
     }