el-dialog内容大于高度时可滑动

el-dialog内容大于高度时可滑动

在 Element UI 中,当 el-dialog 对话框的内容高度超过其可视区域时,默认情况下并不会自动出现滚动条。为了让内容在高度超出时能够滚动,你需要对 el-dialog 的内容部分进行一些样式调整。

以下是一个简单的实现方法,通过给 el-dialog__wrapper 或 el-dialog__body 添加自定义样式来实现滚动:

html 复制代码
<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button>

    <el-dialog
      title="内容可滚动的对话框"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      custom-class="my-custom-dialog"
      width="50%">
      
      <div class="dialog-content">
        <!-- 这里放置大量内容,使其高度超出对话框的可视区域 -->
        <p v-for="n in 50" :key="n">这是第 {{ n }} 行内容。</p>
      </div>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleConfirm() {
      this.dialogVisible = false;
      // 可以在这里处理确认逻辑
    }
  }
};
</script>

<style scoped>
.my-custom-dialog .el-dialog__wrapper {
  overflow: auto; /* 使对话框内容区域可滚动 */
}

/* 或者你可以直接针对 body 部分设置样式 */
/*
.my-custom-dialog .el-dialog__body {
  overflow-y: auto; /* 垂直方向可滚动 */
  max-height: calc(100vh - 150px); /* 根据需要调整最大高度,这里预留了标题栏和底部按钮的空间 */
}
*/

.dialog-content {
  /* 其他内容样式 */
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>
复制代码
在这个示例中:
我为 el-dialog 添加了一个 custom-class 属性,并赋予了一个自定义类名 my-custom-dialog。
在 <style> 标签内,我使用了 .my-custom-dialog .el-dialog__wrapper 选择器来设置样式,使对话框的内容区域在高度超出时能够滚动。你也可以选择 .el-dialog__body 来设置样式,这取决于你希望滚动的具体区域。
我为对话框内容添加了一个 .dialog-content 类,用于放置大量内容,并使其高度超出对话框的可视区域以测试滚动效果。
我保留了对话框底部的按钮区域,并为其添加了一个 .dialog-footer 类。
请注意,append-to-body 属性用于将对话框附加到 body 元素上,这有助于确保对话框的样式和定位不会受到父容器的影响。然而,在某些情况下,如果你不希望对话框附加到 body 上,你可以移除这个属性,并相应地调整样式以确保滚动效果仍然有效。

另外,max-height 的值可能需要根据你的具体需求和对话框的标题栏、底部按钮等部分的高度进行调整。在这个示例中,我使用了 calc(100vh - 150px) 来计算最大高度,其中 100vh 表示视口高度的 100%,150px 是一个估计值,用于预留标题栏和底部按钮的空间。你可以根据实际情况进行调整。
相关推荐
拉不动的猪19 分钟前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪27 分钟前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
uhakadotcom2 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom2 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom2 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom2 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
咖啡教室3 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
咖啡教室3 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
市民中心的蟋蟀6 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
逆袭的小黄鸭6 小时前
JavaScript 闭包:强大特性背后的概念、应用与内存考量
前端·javascript·面试