武林秘籍:超级CV之术

自从工作之后,本人就对 elementUI 组件抱有抵触心理,主要是以下几点

  1. 组件类型太少,都不符合产品需求,需要手动再实现一个。
  2. 相似的组件不能修改组件的某些地方,不能很好的满足个性化需求。
  3. 文档的案例实在太少,不能很好的快速开发。

总结上面几点我比较喜欢其他的UI组件,比如viewUI,antd,aroc,因为这些组件库提供的大量丰富的组件能够满足产品和UI的要求,也可以修改某一些模块,能够快速开发,有更多的时间摸鱼🐟。

但是elementUI开发的项目太多了,这不,公司降本增笑之后我一下接来5个项目,大部分项目都是elementUI开发,并且是vue2的框架搭建。本着能CV就不手写的精神,使用CV大法还是很好的完成了很多界面的开发

突然出现了一个组件,类似删除之后的二次确认提示,但是需求中提示的按钮有3个,我看了一圈难道还要手动封装二次确认提示的弹框了吗?

看了一圈elementUI组件,要不只能使用Dialog 对话框来实现这个效果吗?但是使用messageBox 弹框提示是最佳解决方案呀,但是messageBox弹框好像没有最佳的方案增加一个按钮在取消按钮的旁边,就在我挠头之际,我决定使用最高级的武林秘籍,我把他称之为超级CV之术

第一步:"找"。

打开项目的node_module文件夹,找到element-ui文件夹,然后打开packages文件夹找到message-box文件夹。

第二步:"CV"。

把这整个文件夹"C"一下,找到项目合适的地方"V"一下。好啦!!恭喜你学会了超级CV之术!!

简单分析一下这个文件里面的内容

这个文件里面有三个文件,这三个文件和初始化的vue项目的文件十分相似,index.js、main.vue、main.js。再分析内容

index.js 就是导入了main.js 然后导出了main.js

简单看一下源码,最后将这里面的代码按照自己业务的需求简单修改一下,就得到了一个既满足elementUI样式的,又满足自身业务开发的好用的组件,你只需要继续按照elementUI文档使用你自己的组件即可。

看一下效果完美!!

【总结】如果遇到需要自己手动开发一个组件库的情况,不妨看看项目本身的组件库的源代码,绝大多数的UI组件库的组件单个组件都是独立分离的,完全可以复制下来稍微修改一下,就可以得到一个完美的和组件库样式一致的组件。

相关推荐
葡萄城技术团队8 小时前
1000 人协同压测的环境瓶颈排查:CPU 争用与 Wi\-Fi
前端
excel9 小时前
Marked 与 Markdown 有什么区别?该怎么选?
前端
Da Da 泓10 小时前
五子棋 Web 端测试用例报告
前端·网络·websocket·网络协议·测试用例·项目
zxcvb15311 小时前
远程查看本地文档:一条轻量 Web 文件服务的工程化链路
前端·远程查看文档
niucloud-admin11 小时前
NIUCLOUD PHP SAAS上门家政使用文档:城市管理
java·前端·php
北岛贰11 小时前
啵啵音乐迎来全新升级!
前端
hkNaruto13 小时前
【AI】基于大模型的AI游戏地图生成、控制方案:AI Native Game Harness 迁移操作手册
前端·人工智能·游戏
IT_陈寒13 小时前
Java序列化踩坑记:对象循环引用让我加班两小时
前端·人工智能·后端
Acro14 小时前
快给macOS 上的Grok Bot换一套皮肤
前端
flash俊杰14 小时前
双引擎 OCR 编排:逐页判定、视觉优先、partial 语义与三层超时
前端