el-dialog实现大弹窗滚动小弹窗全屏居中()-其他

el-dialog实现大弹窗滚动小弹窗全屏居中()

// 获取视窗高度
export function getClientHeight() {
  var clientHeight = 0;
  if (document.body.clientHeight && document.documentElement.clientHeight) {
    var clientHeight =
      document.body.clientHeight < document.documentElement.clientHeight
        ? document.body.clientHeight
        : document.documentElement.clientHeight;
  } else {
    var clientHeight =
      document.body.clientHeight > document.documentElement.clientHeight
        ? document.body.clientHeight
        : document.documentElement.clientHeight;
  }
  return clientHeight;
}
/**
 * @description: 获取元素高度
 * @param {*} className 元素类名
 * @return {*}
 * @author: 
 */
export function getDomClientHeight(className) {
  const dom = document.getElementsByClassName(className);
  let domHeight = 0;
  if (dom&&dom.length) {
    // 过滤出 display: none 的元素
    let domArr = []
    for(let i=0; i<dom.length; i++) {
      if(dom[i].clientHeight !== 0) domArr.push(dom[i])
    }

    domHeight = domArr[domArr.length-1].clientHeight;
  }
  return domHeight;
}

export function setDialogClass(className) {
  let clientHeight = getClientHeight();
  let domHeight = getDomClientHeight(className);
  let clientHeight1 = clientHeight * 0.92;

}

使用方式

<template>
  <div>
    <el-dialog
      :class="isSmall ? 'small-dialog__wrapper' : 'big-dialog__wrapper'"
      custom-class="el-dialog-dark"
      ref="dialog"
      title="提示"
      :visible.sync="dialogVisible"
      @open="openDialog"
    >
    </el-dialog>
  </div>
</template>
<script>
import { setDialogClass } from "@/utils/dialogHeight.js";
export default {
  name: "DialogDark",
  data() {
    return {
      isSmall: true, // 是否是正常小弹窗
    };
  },
  methods: {
    openDialog() {
      this.$nextTick(() => {
        this.isSmall = setDialogClass("el-dialog-dark");
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

style

// 大弹窗 滚动
.el-dialog__wrapper.big-dialog__wrapper {
  line-height: 1;
  .el-dialog {
    margin: 8vh auto 8vh !important;
    .el-dialog__header {
    }
    .el-dialog__body {
    }
    .edit-form-footer {
      margin-top: 40px;
    }
  }
  &::-webkit-scrollbar {
    display: none;
  }
}
// 小弹窗 居中
.small-dialog__wrapper.el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  .el-dialog {
    margin: auto !important;//解决超出一屏顶部遮挡问题
  }
}

// 获取视窗高度
export function getClientHeight() {
  var clientHeight = 0;
  if (document.body.clientHeight && document.documentElement.clientHeight) {
    var clientHeight =
      document.body.clientHeight < document.documentElement.clientHeight
        ? document.body.clientHeight
        : document.documentElement.clientHeight;
  } else {
    var clientHeight =
      document.body.clientHeight > document.documentElement.clientHeight
        ? document.body.clientHeight
        : document.documentElement.clientHeight;
  }
  return clientHeight;
}
/**
 * @description: 获取元素高度
 * @param {*} className 元素类名
 * @return {*}
 * @author: 
 */
export function getDomClientHeight(className) {
  const dom = document.getElementsByClassName(className);
  let domHeight = 0;
  if (dom&&dom.length) {
    // 过滤出 display: none 的元素
    let domArr = []
    for(let i=0; i<dom.length; i++) {
      if(dom[i].clientHeight !== 0) domArr.push(dom[i])
    }

    domHeight = domArr[domArr.length-1].clientHeight;
  }
  return domHeight;
}

export function setDialogClass(className) {
  let clientHeight = getClientHeight();
  let domHeight = getDomClientHeight(className);
  let clientHeight1 = clientHeight * 0.92;

}

使用方式

<template>
  <div>
    <el-dialog
      :class="isSmall ? 'small-dialog__wrapper' : 'big-dialog__wrapper'"
      custom-class="el-dialog-dark"
      ref="dialog"
      title="提示"
      :visible.sync="dialogVisible"
      @open="openDialog"
    >
    </el-dialog>
  </div>
</template>
<script>
import { setDialogClass } from "@/utils/dialogHeight.js";
export default {
  name: "DialogDark",
  data() {
    return {
      isSmall: true, // 是否是正常小弹窗
    };
  },
  methods: {
    openDialog() {
      this.$nextTick(() => {
        this.isSmall = setDialogClass("el-dialog-dark");
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

style

// 大弹窗 滚动
.el-dialog__wrapper.big-dialog__wrapper {
  line-height: 1;
  .el-dialog {
    margin: 8vh auto 8vh !important;
    .el-dialog__header {
    }
    .el-dialog__body {
    }
    .edit-form-footer {
      margin-top: 40px;
    }
  }
  &::-webkit-scrollbar {
    display: none;
  }
}
// 小弹窗 居中
.small-dialog__wrapper.el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  .el-dialog {
    margin: auto !important;//解决超出一屏顶部遮挡问题
  }
}