基本信息

案例ID:228038

技术顾问:Ann_ - 5年经验 - 蓝拓商务贸易公司

联系沟通

微信扫码,建群沟通

项目名称:erp系统

所属行业:电子商务 - B2B

->查看更多案例

案例介绍

项目技术: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.如果是↑键,用户位置如果<用户列表顶部就滚动。如果是↓键,用户位置>用户列表底部就滚动

相似案例推荐

其他人才的相似案例推荐

  • 店帮手商业管理平台

    店帮手商业管理平台

    一套SAAS项目 主要是做零售 也支出酒店 餐饮等行业 主

  • web端设计

    web端设计

    医疗系统DRG/DIP(web端) (1)支持DRGs

  • 供应链管理项目

    供应链管理项目

    所负责项目中包含以下功能 需求预测与计划:基于历史数据、市

  • 企业邮件发送系统

    企业邮件发送系统

    企业级别的邮件短信群发系统,方便企业对员工或者客户群发邮件或

  • 分销平台

    分销平台

    1、负责多个项目的前端开发工作,包括页面构建、交互设计与公共

  • 海运电商

    海运电商

    1) 项目概述:负责全球海运 B2B 电子商务平台的架构设计

  • 假勤系统-休假+加班模块

    假勤系统-休假+加班模块

    字节飞书-企业版与标准版休假与加班,PC 小程序 H5 界面

  • O2O供需

    O2O供需

    作为产品经理,主导前后台功能设计与产品生命周期规划:包括业务

  • homeiliving

    homeiliving

    在这个项目中担任前端开发工程师和前端组长工作,使用得技术栈为

  • 上海医药战略

    上海医药战略

    1、战略规划编制:战略规划计划、任务和模板下发,战略规划编制

  • 上海烟草集团工程中心

    上海烟草集团工程中心

    填补新型烟草专利管理上的空白,建立一个以专利检索、分析,集法

  • 批友商城

    批友商城

    一个对接进销存系统的app,主要包括用户端和管理员端,用户端

发布任务

企业点击发布任务,工程师会在任务下报名,招聘专员也会在1小时内与您联系,1小时内精准确定人才

微信接收人才推送

关注猿急送微信平台,接收实时人才推送

接收人才推送
联系需求方端客服
联系需求方端客服