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

项目场景点击展开卡片卡片内容为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 电子设计快问快答

更多资讯

Odoo 19库存期初导入实战指南与优化技巧

营销技能不是玄学：从技术动作到可验证结果的实战路径

COMSOL与MATLAB联合实现岩石多裂隙损伤耦合建模

批量导出文档的工业化流水线：绕过Word卡顿与PDF解析陷阱

VINS-Mono注释包实战指南：IMU预积分、边缘化与逆深度调试

PostHog MCP Tools 实现指南：从 YAML 定义到代码生成的完整流水线

今日更新

SpacetimeDB C++ 模块库实战：用 C++20 在数据库内构建 WebAssembly 模块

别踩雷！不是所有 AI 写作工具都靠谱，2026 高校认可工具精选

SSM+MySQL幼儿园管理系统源码解析：从部署到优化

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

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