关于组件封装解析
程序员文章站
2022-03-04 10:50:08
1善于总结,通常一个公司大部分项目,页面排版类型相近,比如管理
1.1从布局上讲:大都是上左右结构,适合用easyui做为主框架右边主页面用iframe嵌套
1.2从模块上讲:...
1善于总结,通常一个公司大部分项目,页面排版类型相近,比如管理
1.1从布局上讲:大都是上左右结构,适合用easyui做为主框架右边主页面用iframe嵌套
1.2从模块上讲:常用就是表格查询,表单提交,弹出模态框,选项树,表单验证,tab选项卡
1.3从页面样式风格上讲:一般就是红色和蓝色为主打颜色
2创建公司项目样式库
1.1重用性:样式选择用less编写,用变量定义样式,增加灵活性,比如:@theme_color,@theme_font_size,@header_title_font_size
1.2选择多样性:不止定义一套样式,同样布局使用bootstrap,easyui各定义一套,便于技术选型,比如按钮样式多套,便于符合ui设计
3创建公司常用组件封装
3.1总结公司常用功能模块,比如:弹出模态框,加载select选项卡,日期格式化,加载层级关系树结构
3.2根据公司使用场景进行二次封装,比如easyui的弹出框,我们经常会有弹出框内容比较复杂,而且内容需要复用,此时就需要将弹出内容作为 一个单独页面,用iframe嵌入到easyui的window的body中取,原来的框架并不能满足我们需求,就需要自定义module
3.3定义module的时候要考虑复用性,灵活性,通过外置传参控制modal的样式,iframe的id和样式,以及easyui的window的各种参数设置, 比如是否modal,是否close,是否collapse
下一篇: webpack+vue搭建教程