el-dialog高度自适应详解

一、为什么需要高度自适应

在使用el-dialog组件时，通常需要我们手动设置其高度。但是手动设置高度会存在很多问题，比如说：

1、高度不够时出现滚动条，影响用户体验

2、高度过高时出现空白，影响页面美观

因此，使用高度自适应可以很好地解决这些问题。

二、如何实现高度自适应

实现高度自适应的方法有多种，下面介绍两种比较常见的方法。

1、基于CSS的实现

<style>
  .el-dialog__body {
    overflow: auto;
    height: calc(100% - 100px);
  }
</style>

<template>
  <el-dialog
    title="这是标题"
    :visible.sync="visible"
    width="40%">
    <div class="el-dialog__body">
      这是内容
    </div>
  </el-dialog>
</template>

通过在el-dialog__body上设置高度为calc(100% – 100px)，其中100px是el-dialog上面标题栏+底部按钮栏的高度之和。这样就可以保证el-dialog__body的高度始终占满父元素。

2、基于JS的实现

<template>
  <el-dialog
    title="这是标题"
    :visible.sync="visible"
    width="40%"
    :before-close="beforeClose">
    <div ref="dialogBody">
      这是内容
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        dialogHeight: 0
      };
    },
    methods: {
      beforeClose(done) {
        this.dialogHeight = this.$refs.dialogBody.clientHeight;
        done();
      }
    },
    watch: {
      dialogHeight() {
        this.$nextTick(() => {
          this.$el.querySelector(".el-dialog__body").style.height = this.dialogHeight + "px";
        });
      }
    }
  };
</script>

通过在before-close钩子中获取el-dialog__body的高度，并在watch中监听高度变化，当高度变化时动态改变el-dialog__body的高度。

三、如何适配不同屏幕

前面的方法都存在一个问题，就是无法适配移动端屏幕。因此，我们需要对不同屏幕进行适配。

1、基于CSS的适配

<style>
  .el-dialog__body {
    overflow: auto;
    max-height: calc(100vh - 200px);
    height: auto !important;
  }

  @media only screen and (max-width: 768px) {
    .el-dialog__body {
      max-height: calc(100vh - 300px);
    }
  }
</style>

<template>
  <el-dialog
    title="这是标题"
    :visible.sync="visible"
    width="40%">
    <div class="el-dialog__body">
      这是内容
    </div>
  </el-dialog>
</template>

通过设置max-height为calc(100vh – 200px)，其中200px是标题栏和底部按钮栏的高度之和。这样可以保证在屏幕高度小于800px时，el-dialog__body的高度最大为屏幕高度-300px，否则为500px。在移动端屏幕上，通过@media动态修改max-height。

2、基于JS的适配

<template>
  <el-dialog
    title="这是标题"
    :visible.sync="visible"
    width="40%"
    :before-close="beforeClose"
    :destroy-on-close="true">
    <div ref="dialogBody">
      这是内容
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        dialogHeight: 0,
        windowHeight: 0
      };
    },
    methods: {
      beforeClose(done) {
        this.dialogHeight = this.$refs.dialogBody.clientHeight;
        done();
      },
      getWindowSize() {
        this.windowHeight = window.innerHeight;
      }
    },
    mounted() {
      this.getWindowSize();
      window.addEventListener("resize", this.getWindowSize);
    },
    beforeDestroy() {
      window.removeEventListener("resize", this.getWindowSize);
    },
    watch: {
      dialogHeight() {
        if (this.windowHeight  {
            this.$el.querySelector(".el-dialog__body").style.height = (this.windowHeight - 300) + "px";
          });
        } else {
          this.$nextTick(() => {
            this.$el.querySelector(".el-dialog__body").style.height = "500px";
          });
        }
      }
    }
  };
</script>

通过在beforeClose钩子中获取el-dialog__body的高度，并在watch中监听高度变化，当高度变化时动态改变el-dialog__body的高度。通过在mounted钩子中添加resize事件的监听以及在beforeDestory钩子中移除resize事件的监听，当窗口大小发生变化时重新获取窗口大小。

四、小结

通过本文的介绍，我们了解了el-dialog高度自适应的实现方法以及如何适配不同屏幕。希望对大家有所帮助。