Element Plus Dialog组件 弹窗全屏

发布于：3天前

  <Dialog :title="dialogTitle" v-model="dialogVisible" :width="'100%'" :style="dialogStyle">
    <ContentWrap>
            <div>test </div>
    </ContentWrap>
</Dialog >



<script setup lang="ts">

// 动态计算弹窗高度
const dialogStyle = computed(() => ({
  '--el-dialog-height': '100vh',
  'margin-top': '0',
  'margin-bottom': '0'
}))
</script>


<style>
.top-form-inline .el-input {
  --el-input-width: 220px;
}

.top-form-inline .el-select {
  --el-select-width: 220px;
}

/* 隐藏 el-date-picker 的图标 */
.custom-date-picker .el-input__icon {
  display: none !important;
}

.el-dialog {
  height: var(--el-dialog-height) !important;
}

.el-dialog__body {
  height: calc(100% - 55px); /* 减去头部和底部高度 */
  overflow-y: auto;
}

/* 优化滚动条样式 */
:deep(.el-dialog__body) {
  /* Firefox浏览器滚动条 */
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;

  /* Webkit浏览器滚动条 */
  &::-webkit-scrollbar {
    width: 6px; /* 竖向滚动条宽度 */
    height: 6px; /* 横向滚动条高度 */
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;

    &:hover {
      background: #a8a8a8;
    }
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
}
</style>