elementui dialog 位置

### 设置 ElementUI Dialog 显示位置

ElementUI 的 `el-dialog` 默认居中显示于视窗中央。对于特定场景下需要自定义对话框的位置，官方并没有直接提供 API 来控制具体坐标定位。不过可以通过一些间接方法来达到目的。

#### 使用 CSS 定制样式覆盖默认行为

通过自定义类名并利用更具体的 CSS 选择器可以重写 `.el-dialog` 的样式以改变其展示效果：

/* 添加到全局样式文件 */
.custom-position .el-dialog {
    top: 10%; /* 调整上下偏移量 */
    left: 25%; /* 左右偏移量 */
}

然后在模板里给 `<el-dialog>` 加上对应的 class 属性:

<el-dialog :visible.sync="dialogVisible" custom-class="custom-position">
</el-dialog>

这种方法简单易行，适用于大多数情况下的微调需求[^1]。

#### 利用 JavaScript 动态计算位置

当需要更加灵活地决定 dialog 出现的具体位置时，则可能需要用到 JS 结合浏览器窗口尺寸动态设定 style 样式。这通常涉及到监听 window resize 事件以及获取当前屏幕分辨率等操作。

// 假设这是 Vue 组件内的 methods 方法之一
adjustPosition() {
    const winHeight = document.documentElement.clientHeight;
    const winWidth = document.documentElement.clientWidth;

    this.$nextTick(() => { // 确保 DOM 更新完成后再执行下面逻辑
        let el = this.$refs.dialog.$el; // 获取实际渲染出来的元素节点
        
        Object.assign(el.style, {
            position: 'absolute',
            top: `${winHeight * 0.1}px`, // 上边距占整个高度的10%
            left: `${winWidth * 0.25}px` // 左边距为宽度四分之一处
        });
    })
}

mounted(){
    window.addEventListener('resize', this.adjustPosition);
},
beforeDestroy(){
    window.removeEventListener('resize', this.adjustPosition);
}

此方式虽然复杂度有所增加，但对于某些特殊业务场景来说非常有用[^2]。

需要注意的是，在调整 dialog 位置的同时也要考虑响应式设计的要求，确保不同设备上的用户体验一致良好。