自做美食哪些网站,徐汇苏州网站建设,织梦网站搬迁,东莞外贸建站及推广用过ant design的小伙伴都知道#xff0c;select组件是支持联想搜索跟上下键选中的效果的#xff0c;但是在项目中我们可能会遇到用select组件无法实现我们的需求的情况#xff0c;比如说一个div框#xff0c;里面有input#xff0c;又有tag标签#xff0c;在input中输入…用过ant design的小伙伴都知道select组件是支持联想搜索跟上下键选中的效果的但是在项目中我们可能会遇到用select组件无法实现我们的需求的情况比如说一个div框里面有input又有tag标签在input中输入内容触发联想然后选中其中某一个以tag标签的形式回填到div框中类似这种需求。这个时候我们可以采用ant design的dropdown组件来帮助我们实现。
getBoundingClientRect()方法可以获取元素的大小及其相对视口的位置这样可以帮助对元素是否在可视区域内进行判断
getBoundingClientRect() 是一个在 DOM文档对象模型中常用的方法它返回一个 DOMRect 对象
该对象提供了元素的大小及其相对于视口的位置。这个方法非常有用
特别是在需要知道元素在页面上的确切位置或尺寸时。DOMRect 对象包含以下属性x元素左上角相对于视口viewport的 x 坐标包括任何滚动偏移。
y元素左上角相对于视口viewport的 y 坐标包括任何滚动偏移。
width元素的宽度包括内边距 padding但不包括边框 border、外边距 margin 和滚动条。
height元素的高度包括内边距 padding但不包括边框 border、外边距 margin 和滚动条。
top元素顶部边缘相对于视口viewport的 y 坐标包括任何滚动偏移。
right元素右边缘相对于视口viewport的 x 坐标包括任何滚动偏移。
bottom元素底部边缘相对于视口viewport的 y 坐标包括任何滚动偏移。
left元素左边边缘相对于视口viewport的 x 坐标包括任何滚动偏移。
页面布局代码 需要根据实际情况来进行调整
componentDidMount(){// 添加键盘事件监听 document.addEventListener(keydown, this.handleKeyDown);
}// 渲染下拉项
showGroupContcatMenu (){const {contactSearchList, currentFocusMenuIndex} this.state;return Menu{contactSearchList.map((item, index)(Menu.Item id{dropdown-menu-item- index} key{item.id} onClick{()this.handleSelectMenuItem(item)} style{{background: index currentFocusMenuIndex ? #fff5e6 : }}div{item.name}nbsp;nbsp;{item.enterpriseName}nbsp;nbsp;span{item.email ${item.email}}/span/div/Menu.Item))}Menu.Item id{dropdown-menu-item- contactSearchList.length} key{contactSearchList.length} style{{background: currentFocusMenuIndex contactSearchList.length ? #fff5e6 : }} onClick{()this.openGroupContcatIcon(null)}搜索联系人/Menu.Item/Menu}// 布局代码
div classNametag{selectContact.length 0 selectContact.map(item(Popover key{item.id} triggerclick content{Spin spinning{showPhoneLoading}span style{{userSelect:none}}{showPhoneLoading?:trueEmail}/span/Spin} overlayClassNamecontact-email-tiponVisibleChange{(visible) this.onPopoverVisibleChange(visible, item)}Tag key{item.id} closable{true} onClose{(e)this.handleClose(item.id,item,e,searchGroupContcat,contact)}{item.name}{item.hiddenEmail || item.email || item.disPlayEmail?spannbsp;nbsp;/span:}{item.hiddenEmail || item.email || item.disPlayEmail}/Tag/Popover))}Dropdown visible{onKeywordsContact ? true : false}overlay{()this.showGroupContcatMenu()} overlayClassNamebropdown-overlay-classdestroyPopupOnHide{true} div{getFieldDecorator(onKeywordsContact, {initialValue: ,})(AInput classNameinput onBlur{(e)this.handleBlur(onKeywordsContact)}onPressEnter{this.handleInputPressEnter}onChange{this.handleGroupContcatChange}/)}/div/Dropdown
/div
监听键盘响应事件的核心代码
handleKeyDown (event) {const {onKeywordsContact, currentFocusMenuIndex, contactSearchList} this.statelet newCurrentFocusMenuIndex currentFocusMenuIndex;if (event.key ArrowUp onKeywordsContact) { event.preventDefault(); newCurrentFocusMenuIndex currentFocusMenuIndex 0 ? contactSearchList.length : currentFocusMenuIndex - 1;this.scrollIntoViewIfNeeded(newCurrentFocusMenuIndex, contactSearchList.length);} else if (event.key ArrowDown onKeywordsContact) { event.preventDefault(); newCurrentFocusMenuIndex currentFocusMenuIndex contactSearchList.length ? 0 : currentFocusMenuIndex 1;this.scrollIntoViewIfNeeded(newCurrentFocusMenuIndex, contactSearchList.length);} this.setState({currentFocusMenuIndex: newCurrentFocusMenuIndex // 记录当前选中高亮的元素}) }scrollIntoViewIfNeeded (newCurrentFocusMenuIndex, maxLength){const ulEle $(.bropdown-overlay-class .ant-dropdown-menu)[0];const liEle $(#dropdown-menu-item- newCurrentFocusMenuIndex)[0];const ulRect ulEle.getBoundingClientRect(); const liRect liEle.getBoundingClientRect();if(newCurrentFocusMenuIndex 0){ulEle.scrollTop 0;} else if(newCurrentFocusMenuIndex maxLength){ulEle.scrollTop ulEle.scrollHeight;} else {// 检查li是否在ul的上方 if (liRect.top ulRect.top) { // 滚动ul到li的顶部位置 ulEle.scrollTop liEle.offsetTop; } // 检查li是否在ul的下方这里假设我们不想滚动超过li的底部 else if (liRect.bottom ulRect.bottom) { // 滚动ul到li的底部位置减去ul的高度以确保li的底部在可视区域内 ulEle.scrollTop liEle.offsetTop liEle.offsetHeight - ulEle.offsetHeight; } }}
