You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
bindSideItemMouseDownEvent(e){this.isMouseDown=truethis.lastTime=newDate()this.switchCharacter(e)},bindSideItemMouseMoveEvent(e){constnowTime=newDate()if(nowTime-this.lastTime>this.throttleTime){this.lastTime=nowTimethis.switchCharacter(e)}},bindSideItemMouseUpEvent(e){this.isMouseDown=falsethis.modalFlag=false}// created created(){constself=thisdocument.addEventListener('mouseup',()=>{self.isMouseDown=falseself.modalFlag=false})}
Vue-index 一个vue的字母索引组件
前言
公司需求要是实现一个首字母索引的功能,类似于微信通讯录那样的效果。在多次在github上查找都没有找到类似的实现,所以自己就简单地实现了一把。
dom结构
主要的dom解构分两大块,一大块是索引内容的列表,一大块是字母列表
在内容索引列表上,绑定上
data-set
,好在后面做查找对比。因为要实现按住滑动还能查找的功能,在字母列表上做了事件代理,减少dom的事件绑定。
字母列表事件处理
在
mousedown
的情况下,设置一个标志位为isMouseDown
。在mousemove
的时候切换查找的字母,最后mouseup
的时候设标志位为false
在这里有一个问题就是在超出区域范围,会使得
mouseup
无效,所以在created
的时候绑定了下windows,解决超出范围无效的情况。接下来是
switchCharacter
方法最后只要
watch
索引字母character
就可以做滚动了到此位置就是整个索引的主要流程,具体的代码可以看项目vue-index。
The text was updated successfully, but these errors were encountered: