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

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>

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>

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
   }
 }

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
       }
     }