项目技术:vue3,nuxt3,fetch,tailwind, echarts, lodash, ag-grd, element-plus, moment,
项目地址:https://dev.elcuk-erp.com/
项目职责:
1.项目主要由财务,海外仓,市场,奥莱,产品,采购,物流,系统等模块。
2.项目是由 nuxt 3做的底层架构,网络请求使用的 fetch 来做的架构
3.使用@vueuselrouter 将请求 table 的参数同步的路由中,使用户通过 url 可以直接访问。
4.通过 store和 slot 来封装权限组件。
5.通过 ag-grid 插件来将 table 实现虚拟列表,实现性能优化。
6.通过 tailwind 插件书写 css。
7.将 EIMessageBox,EINotfication,moment 抽取成组件,优化代码。
项目难点:
5.写一个富文本组件,在富文本组件中添加一个输入@就会弹出用户列表点击用户将就会输入到富文本里面。
解决:规定使用trix富文本包。但是这个富文本没有用户列表的功能。
1.写一个用户列表的盒子,将他影藏起来,盒子使用fixed定位,高度通过光标高度计算。
2.监听富文本的 @input 如果输入了@,就显示用户列表。
3.点击某一个用户后,将@通过replace替换成用户名,这样也可以影藏用户列表。
6.优化用户列表,通过键盘的 ↑ ↓ 键 来切换用户,通过回车来选中用户。
解决:1. 首先通过 @keydown 来监听所有的键盘事件。
2.通过index和变量来判断当前选中的是哪个用户使之高亮。
3.在监听这三个按键时,通过 preventDefault() stopPropagation() 阻止冒泡,使光标不要乱跳。
7.由于用户过多,所以添加了element滚动条。需要在使用 ↑ ↓ 键时,判断是否是视口最后一个用户。 并且滚动 滚动条。
解决:通过文档看到滚动条的setScrollTop()可以滚动 滚动条。
1.拿到每一个用户的实例。
2.首先在显示用户列表时计算出用户列表顶部和底部的位置。
3.在切换用户时,通过实例的getBoundingClientRect() 拿到用户的位置。
4.如果是↑键,用户位置如果<用户列表顶部就滚动。如果是↓键,用户位置>用户列表底部就滚动