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 是一个估计值,用于预留标题栏和底部按钮的空间。你可以根据实际情况进行调整。
相关推荐
这颗橘子不太甜QAQ几秒前
Husky使用技巧
javascript·git·代码规范
장숙혜12 分钟前
ElementUi的tabs样式太难修改,自定义tabs标签页
前端·javascript
火星思想30 分钟前
Promise 核心知识点(非基础)
前端·javascript·面试
前端大白话31 分钟前
炸裂!10个 React 实战技巧,让你的代码从“青铜”秒变“王者”
前端·javascript·react.js
10年前端老司机37 分钟前
微信小程序模板语法和事件
前端·javascript·微信小程序
攻城狮的大师兄39 分钟前
红宝书(第四版)通读之查漏补缺
javascript
苹果酱05671 小时前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.1 小时前
react和vue的区别之一
javascript·vue.js·react.js
突头小恐龙1 小时前
Chrome devTools - Lighthouse
前端·javascript·chrome
谦谦橘子1 小时前
手写tiny webpack,理解webpack原理
前端·javascript·webpack