dialog

web/src/components/Dialog/src/Dialog.vue

@@ -13,7 +13,7 @@ const props = defineProps({
   fullscreen: propTypes.bool.def(true),
   width: propTypes.oneOfType([String, Number]).def('40%'),
   scroll: propTypes.bool.def(true), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度
-  maxHeight: propTypes.oneOfType([String, Number]).def('450px')
+  maxHeight: propTypes.oneOfType([String, Number]).def()
 })
 
 const getBindValue = computed(() => {
@@ -54,7 +54,8 @@ watch(
 
 const dialogStyle = computed(() => {
   return {
-    height: unref(dialogHeight)
+    // height: unref(dialogHeight)
+    height: '100%'
   }
 })
 
@@ -81,7 +82,6 @@ function closedHandler() {
     draggable
     class="com-dialog"
     :show-close="false"
-    
     @close="closeHandler"
     @closed="closedHandler"
   >
@@ -112,10 +112,10 @@ function closedHandler() {
       </div>
     </template>
 
-    <ElScrollbar v-if="scroll" :style="dialogStyle">
+    <ElScrollbar  :style="dialogStyle">
       <slot></slot>
     </ElScrollbar>
-    <slot v-else></slot>
+    <!-- <slot v-else></slot> -->
     <template v-if="slots.footer" #footer>
       <div :style="{ 'pointer-events': closing ? 'none' : 'auto' }">
         <slot name="footer"></slot>
@@ -127,6 +127,10 @@ function closedHandler() {
 <style lang="scss">
 .com-dialog {
   padding: 0 10px 10px;
+  box-sizing: border-box;
+  // margin: auto auto;
+  overflow: hidden;
+
   .#{$elNamespace}-overlay-dialog {
     display: flex;
     justify-content: center;
@@ -145,6 +149,10 @@ function closedHandler() {
 
     &__body {
       padding: 10px !important;
+      // height: 100%;
+      max-height: calc(100vh - 118px);
+      box-sizing: border-box;
+      overflow: auto;
     }
 
     &__footer {