ElementUI 滑动-element ui dialog 滚动条

当使用ElementUI中的Dialog组件时，如果内容较多，会出现滚动条。为了让Dialog内部的滚动条更加友好地工作，有几种解决方案。

解决方案

一种常见的方案是调整Dialog样式，使其内部容器可以自动产生滚动条，而不会影响页面整体布局。另外也可以通过监听窗口大小变化动态调整Dialog高度。下面具体实现方法。

方法一：自定义样式设置

可以通过覆盖ElementUI默认样式来解决这个问题。主要思路是在Dialog内部添加一个可滚动的容器，并限制其高度。

html

  
    <div class="scroll-container">
      <!-- 这里放置你的内容 -->
    </div>
  
</p>


.scroll-container {
  max-height: 40vh; /* 根据需要调整 */
  overflow-y: auto;
}


<p>

这种方法简单直接，适用于大多数场景。但需要注意的是，max-height的具体值要根据实际情况进行调整，以确保用户体验良好。

方法二：使用ElScrollbar组件

ElementUI提供了专门的滚动条组件ElScrollbar，可以直接用于Dialog中：

html
<template>
<el-dialog :visible.sync="dialogVisible" width="50%">
<el-scrollbar>
<!-- 放置你的内容 -->
</el-scrollbar>
</el-dialog>
</template>


这种方式的好处是可以利用ElementUI内置的滚动条样式和功能，如滚动条颜色、宽度等都可以方便地配置。

方法三：动态调整高度

对于一些特殊场景，可能需要根据屏幕大小动态调整Dialog的高度。可以通过监听窗口大小变化来实现：

html

  
    <div class="content"></div>
  
</p>


export default {
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', this.adjustHeight);
      this.adjustHeight();
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.adjustHeight);
  },
  methods: {
    adjustHeight() {
      const dialog = this.$refs.dialog.$el;
      const content = dialog.querySelector('.content');
      const maxHeight = window.innerHeight * 0.8 - dialog.offsetHeight + content.offsetHeight;
      content.style.maxHeight = `${maxHeight}px`;
    }
  }
}


<p>

这段代码会根据窗口大小实时调整Dialog内容区域的高度，保证滚动条始终处于合理位置。

以上三种方法可以根据实际需求选择使用，建议先尝试最简单的种方法，如果不能满足需求再考虑其他两种更复杂的方案。