Dialog组件——通过代码获取Dialog的width=0?

问题:设计模式下Dialog的width=450,但是通过代码获取Dialog组件的宽度width=0,什么原因?

分析:

1.设计模式下创建名称为MsgBox的Dialog,设置属性width为450,height=92。设置为分离模式,编译通过

2.在其它任一场景运行时脚本中,通过new创建MsgBox的对象msgBox

3.console.log(msgBox.width),打出日志为0,而不是450,关键代码:

let msgBox = new ui.MsgBoxUI();
console.log(msgBox.width)
msgBox.show();

4.分析1:给msgBox注册打开之后的回调函数onOpened,在回调函数中获取width属性,依然为0:

let msgBox = new ui.MsgBoxUI();
console.log(msgBox.width);
dialog.onOpened = function(){
     console.log(msgBox.width);
}
msgBox.show();

5.暂未找到渲染完成后的回调接口,可以获取Dialog的width值。

### 实现 el-dialog 自动调整高度或支持手动缩放 为了使 `el-dialog` 组件能够根据内容自动调整高度或者支持手动缩放功能,可以采用以下方法: #### 方法一:通过 CSS 和 JavaScript 动态设置高度 可以通过监听对话框的内容变化来动态更新其高度。以下是具体实现方式。 1. **绑定自定义样式类名** 使用 Vue 的 `v-bind:class` 或者直接在模板中添加一个特定的 class 来控制样式。 2. **计算并应用高度** 利用 JavaScript 获取子元素的高度,并将其赋值给父容器(即 dialog 的主体部分)。这通常涉及 DOM 操作以及事件侦听器的应用。 ```javascript // 假设这是 Vue 中的一个方法用于初始化高度调整逻辑 methods: { adjustHeight() { const contentArea = this.$refs.dialogContent; if (contentArea) { let newHeight = contentArea.scrollHeight + 'px'; // 计算滚动区域的实际高度 this.$nextTick(() => { // 确保 DOM 已经渲染完成后再执行操作 document.querySelector('.el-dialog').style.height = newHeight; // 应用到整个 Dialog 容器上 }); } }, } ``` 上述代码片段展示了如何利用 `$refs` 参考目标节点并通过简单的 DOM 属性访问机制重新设定尺寸[^1]。 3. **响应式设计兼容性处理** 如果页面布局可能发生变化,则还需要考虑窗口大小改变的情况下的适配问题。为此可以在 mounted 钩子里挂载 window resize listener 并调用相同的函数来进行实时同步。 ```javascript mounted() { window.addEventListener('resize', this.adjustHeight); }, beforeDestroy() { window.removeEventListener('resize', this.adjustHeight); // 清理资源防止内存泄漏 } ``` --- #### 方法二:增强版——基于现有组件扩展功能 如果希望进一步提升用户体验至允许用户自行拖拽调节大小的程度,则推荐参考已有的解决方案如案例中的 `SkDialog` 封装思路。它不仅保留了原生 API 接口还额外增加了交互特性比如自由拉伸边界线等功能。 下面给出一段简化版本的手动缩放示例代码供参考: ```html <template> <div ref="dialogWrapper" @mousedown.stop="startResize"> <!-- 正常使用 el-dialog --> <el-dialog :visible.sync="isVisible">...</el-dialog> <div v-show="isResizing" class="resizer"></div><!-- 辅助标记点 --> </div> </template> <script> export default { data(){ return{ isResizing:false, startX:null, startY:null, startWidth:null, startHeight:null }; }, methods:{ startResize(e){ this.isResizing=true; this.startX=e.clientX; this.startY=e.clientY; const rect=this.$refs['dialogWrapper'].getBoundingClientRect(); this.startWidth=rect.width; this.startHeight=rect.height; document.body.style.cursor='nwse-resize'; document.onmousemove=(ev)=>this.doResize(ev); document.onmouseup=()=>this.endResize(); }, doResize(event){ const diffX=event.clientX-this.startX; const diffY=event.clientY-this.startY; this.$refs['dialogWrapper'].style.width=`${this.startWidth+diffX}px`; this.$refs['dialogWrapper'].style.height=`${this.startHeight+diffY}px`; }, endResize(){ this.isResizing=false; document.body.style.cursor=''; document.onmousemove=null; document.onmouseup=null; } } }; </script> <style scoped lang="scss"> .resizer{position:absolute;right:0;bottom:0;width:8px;height:8px;background-color:#ccc;} </style> ``` 此段脚本实现了基本的四角方向上的任意比例变换效果。当然实际开发过程中还需注意更多细节诸如最小宽高限制、溢出隐藏等问题。 --- ### 总结 无论是单纯依赖于框架内部提供的工具还是借助外部库的帮助都可以很好地解决这个问题。前者更加轻量级适合小型项目快速迭代需求;后者则提供了更丰富的定制选项适用于复杂场景下长期维护的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值