element的el-dialog 通过JS计算距离当前视口高度 居中

Element UI的`el-dialog`组件是一个弹出对话框，如果你想通过JavaScript动态计算它与当前视口的高度，并使其居中显示，你可以按照以下步骤操作：

1. 首先获取dialog元素：

const dialog = document.querySelector('.el-dialog');

这里的`.el-dialog`需要替换为你实际的dialog节点选择器。

2. 获取窗口的滚动高度和对话框的顶部位置：

const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const dialogTop = dialog.offsetTop;

3. 计算对话框应该开始的位置以便于居中：

const viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
const dialogMiddle = scrollTop + (viewportHeight - dialog.offsetHeight) / 2;
const topAdjustment = dialogMiddle - dialogTop;

这里我们计算了屏幕底部到对话框中心的距离，然后将这个值添加到dialog的初始top位置，使它居中。

4. 应用调整后的顶部位置：

dialog.style.top = `${topAdjustment}px`;

完整的示例代码：

window.addEventListener('scroll', () => {
  const dialog = document.querySelector('.el-dialog');
  if (dialog) {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const dialogTop = dialog.offsetTop;
    const viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
    const dialogMiddle = scrollTop + (viewportHeight - dialog.offsetHeight) / 2;
    const topAdjustment = dialogMiddle - dialogTop;
    dialog.style.top = `${topAdjustment}px`;
  }
});