随笔分类 -  组件化

同步导航菜单与路由，并在关闭标签（或浏览器）后重新时，维持离开时的路由
摘要：简介 PC 端路由跳转除了各种点击事件外，还经常会通过前进后退键触发，此时，为了确保导航菜单与路由地址的同步关系，就需要在菜单点击事件的基础上，新增对路由的侦听。 同时，若是希望在添加了导航持久化的情况下，在用户关闭标签（或浏览器）后重新时，可以直接重定向到离开时的路由，则需要在页面初始化时手动调用 阅读全文
posted @ 2022-12-08 14:33 CJc_3103 阅读(93) 评论(0) 推荐(0)
封装一个 vue3 通用组件，用于懒加载子组件
摘要：简介 某些场景下，容器组件会包含很多子组件，比如表格的列和表单的字段，而一旦数量上去而且列/字段组件还嵌套了其他组件，就会导致渲染时长急剧增加。因此，考虑封装一个通用的懒加载组件，分组延迟加载子组件，使得第一次渲染不会产生明显的卡顿；更多的子组件会在第一组子组件渲染完毕一段时间后再依次分段渲染。 实 阅读全文
posted @ 2022-12-05 15:30 CJc_3103 阅读(851) 评论(0) 推荐(0)
二次封装 XLSX 插件为 Book 类
摘要：简介 XLSX 插件默认提供的都是一些函数，或者是对象下的函数，使用起来多少有些不便，因此，将插件的导出二次封装为 Book 类，并将部分功能重新组合，使之更便于使用。 适用版本：XLSX 0.18.5 已封装的功能介绍 新建 WorkBook 对象（单张表）： const book = new B 阅读全文
posted @ 2022-11-25 00:34 CJc_3103 阅读(66) 评论(0) 推荐(0)
element form 实现思路解析
摘要：简介 element 表单主要分为三层结构： ElForm ElFormItem 具体的表单输入组件 ElForm 组件作为 ElFormItem 组件的容器，负责统一管理所有的 ElFormItem 及其事务，包括： ElFormItem 列表的维护：新增、删除 表单任务（验证、清除验证、重置）的 阅读全文
posted @ 2022-11-07 17:36 CJc_3103 阅读(883) 评论(0) 推荐(0)
Vue 中的插槽内容穿透和配置参数过滤
摘要：需求描述 （以element ui组件为基础）设计一种嵌套结构，从上到下依次是: 卡片组(dyn-card-group) 卡片(dyn-card) 布局组(dyn-layout-group，包含 el-row 和 el-col) 以下实现是通过配置参数的方式动态渲染组件，避免重复书写视图模板。配置参 阅读全文
posted @ 2022-05-01 21:49 CJc_3103 阅读(1062) 评论(0) 推荐(0)
浅析 Vue 中的组件通信方式
摘要：组件的关系 根据组件的上下级“包含关系”，分为父子组件、祖孙组件、以及兄弟组件。 同时，根据组件关系的“紧密程度”，可以分为耦合关系和松散关系，或者说静态结构耦合与动态数据耦合。具有耦合关系的组件，其层级结构是静态的，比于：ul->li 或是 header-aside-content-foot，这类 阅读全文
posted @ 2022-04-29 18:27 CJc_3103 阅读(82) 评论(0) 推荐(0)