专栏名称: 前端从进阶到入院
我是 ssh,只想用最简单的方式把原理讲明白。wx:sshsunlight,分享前端的前沿趋势和一些有趣的事情。
目录
相关文章推荐
今天看啥  ›  专栏  ›  前端从进阶到入院

实现一个支持@的输入框

前端从进阶到入院  · 公众号  ·  · 2024-07-05 13:30
    

文章预览

近期产品期望在后台发布帖子或视频时,需要添加 @用户 的功能,以便用户收到通知,例如“xxx在xxx提及了您!”。 然而,现有的开源库未能满足我们的需求,例如 ant-design 的 Mentions 组件: 但是不难发现跟微信飞书对比下,有两个细节没有处理。 @用户没有高亮 在删除时没有当做一个整体去删除,而是单个字母删除,首先不谈用户是否想要整体删除,在这块有个模糊查询的功能,如果每删一个字母之后去调接口查询数据库造成一些不必要的性能开销,哪怕加上防抖。 然后也是找了其他的库都没达到产品的期望效果,那么好,自己实现一个,先看看 最终实现的效果 : 封装之后使用:     height={ 150 }     onRequest={ async  (searchStr) => {          const  { data } =  await  UserFindAll({  nickname : searchStr });          return  data?.list?.map( ( v ) => ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览