点击卡片渲染小细节-北京尧图网络

项目场景点击展开卡片卡片内容为echart的图表。默认不展开卡片。问题描述点击展开后内容空白不显示图表。原因分析因为默认不展开因此图表无法直接渲染需要添加对应的方法去渲染图表。虽然页面在一开始就获取了图表所需的数据甚至可能已经做了初始化。但是要注意此时卡片并没有展开因此dom没有所以初始化是失败的就导致了点击展开以后内容空白图表无法渲染。解决方案需要根据卡片展开去渲染数据有两个方法可以去做一watch监听卡片的展开监听到展开以后进行图表渲染二添加卡片的点击事件在点击事件里面添加渲染逻辑方法一watch处理逻辑用户点击 collapse 标题↓van-collapse 内部修改 activeNames展开↓watch 监听到 activeNames 变化↓$nextTick等待 DOM 更新完成↓面板已展开容器有宽高↓初始化图表↓渲染成功特点 van-collapse 自主改变数据watch 被动响应逻辑自然。这里是监听到卡片展开的消息就出发了watch代码块使用$nextTick是为了确保dom更新完成使得图表渲染所需的高宽存在否则图表可能会渲染失败ctiveNames (newValue) { // 监听 1卡片是否被展开 if (newValue newValue.includes(1)) { this.$nextTick(() { if (this.completionChart) { // 图表已存在调整尺寸 this.completionChart.resize() } else if (this.completionChartReady) { // 数据已加载立即初始化图表 this.initCompletionChart() } }) } }方法二点击事件处理逻辑用户点击↓click handler 执行同步1. this.activeNames [1] → 主动改变数据2. this.$nextTick(() { → 等待 DOM 更新完成initCompletionChart() → 面板已展开容器有宽高})↓渲染成功1、用 van-collapse 的 change 事件van-collapse v-modelactiveNames changeonCollapseChange van-collapse-item name1 template #title div classfirstContentTitle0 span classfirstContentTitle1 van-image :srcrequire(/assets/icon/ico_two_done.svg) / /span span classfirstContentTitle2各分公司完成情况/span /div /template div classfirstContentFrame div classchart-container refcompletionChart/div /div /van-collapse-item /van-collapse2、对应的methodmethods: { onCollapseChange() { if (this.activeNames !this.activeNames.includes(1)) { this.activeNames.push(1) this.$nextTick(() { if (this.completionChart) { this.completionChart.resize() } else if (this.completionChartReady) { this.initCompletionChart() } }) } } }错误示例点击事件逻辑和watch处理代码一致图表在第一次展开的时候会是空白第二次展开才能正常渲染methods: { onCollapseChange() { if (this.activeNames this.activeNames.includes(1)) { this.$nextTick(() { if (this.completionChart) { this.completionChart.resize() } else if (this.completionChartReady) { this.initCompletionChart() } }) } } }错误原因因为点击事件发生时卡片的展开标识还没有更新而是优先执行点击事件的逻辑顺序如下用户点击-执行代码块-更新卡片展开标识由此可知此时activename并没有‘1’所以其实无法执行代码块就算不加if (this.activeNames this.activeNames.includes(1))的判断他也无法成功渲染因为卡片并没有成功展开呢dom没有更新没有高宽给到echart渲染图表解决方案点击事件代码块手动修改卡片展开标识-dom更新完毕-渲染图表总结watch直接监听到卡片展开标识更新以后才执行watch代码块要注意使用$nextTick等待dom更新完成以后再执行echart渲染是因为echart渲染强关联dom的高宽否则直接执行是可以的点击事件则是先触发点击事件代码块才到更新展开标识。按照这个逻辑首次展开是无法获取图表渲染所必须的高宽因此无法成功所以需要将展开标识的更新前置到点击事件代码块然后后面逻辑与watch一致dom更新图表渲染两者逻辑上略有不同因此操作也略不同

点击卡片渲染小细节

相关推荐

算法之旅-Hot100—三数之和

计算机毕业设计之基于ssm框架的食品安全及溯源系统

51. OrCAD中怎么创建新的原理图工程文件？I Cadence Allegro 电子设计快问快答

更多资讯

青田县电工证培训通过率揭秘：证书过期了不知道怎么复审延期

2026河南最新政策下特种电工作业教学怎么安排才不耽误工地进度

在昆山哪里学电工证怎么选机构才能不被坑考前押题攻略全公开

电工证审理怎么查询保姆级教程：别被中介骗了，自己查更靠谱

河源连平电工证换证怎么考，全国通用怎么拿？

任县电工证怎么复审官方报名入口在哪找

今日更新

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本周精选

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？

相关推荐

算法之旅-Hot100—三数之和

计算机毕业设计之基于ssm框架的食品安全及溯源系统

51. OrCAD中怎么创建新的原理图工程文件？I Cadence Allegro 电子设计 快问快答

更多资讯

青田县电工证培训通过率揭秘：证书过期了不知道怎么复审延期

2026河南最新政策下特种电工作业教学怎么安排才不耽误工地进度

在昆山哪里学电工证怎么选机构才能不被坑 考前押题攻略全公开

电工证审理怎么查询保姆级教程：别被中介骗了，自己查更靠谱

河源连平电工证换证怎么考，全国通用怎么拿？

任县电工证怎么复审官方报名入口在哪找

今日更新

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗 良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本周精选

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗 良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？

51. OrCAD中怎么创建新的原理图工程文件？I Cadence Allegro 电子设计快问快答

在昆山哪里学电工证怎么选机构才能不被坑考前押题攻略全公开

新疆电工作业干活累吗良心建议助你避开考不过的坑

新疆电工作业干活累吗良心建议助你避开考不过的坑