vant中,van-dropdown-menu-item中open和close事件的顺序
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
vant中,van-dropdown-menu-item中open和close事件的顺序
⽬前在做⼀个使⽤了vant组件库的项⽬,项⽬中有⼀块内容使⽤了DropDownMenu组件实现⼀个下拉菜单的效果,当菜单下拉的时候,菜单栏以及其上⽅搜索栏的背景颜⾊和字体颜⾊都会发⽣改变,关闭时会恢复原状。
这块我是使⽤了两个css样式⽤于区分菜单开始和菜单关闭的状态,并绑定到相对应dom的class属性上。
然后通过van-dropdown-menu-item的open和close的时间进⾏class的切换。
故事,就从这⾥开始了。
当我后⾯⾃⼰测试的时候发现,单⼀个菜单已经打开的时候,再点击另⼀个菜单,之前打开的菜单会⾃动关闭,这本来是⼀件好事对吧。
但这厮从左往右点的时候是正常的,但从从右往左点的时候,在已经有菜单栏开启的时候,背景变了回去。
why?why?why?
在确认了不是css的问题之后,我分析是open和close事件在执⾏过程中出现了问题。
分别给open和close加了个console.log()输出。
然后发现从左往右的时候,open和close的顺序是:open1->close1->open2;从右往左的时候是:open2->open1->close2
这就导致,当我们从右向左点击菜单的时候,最后执⾏的总会是前⼀个van-dropdown-menu的close。
⾄于如何解决的话。
⽬前我是给每个菜单都加了个参数,⽤于表⽰他们之间的关系,如果open和close事件都是同⼀个菜单触发的话,close中改变样式的事件才会触发,如果是不⼀样的话则不会触发。
其本质相当于关闭了两个菜单按钮切换开启时的close事件,相当于:从左往右,open1->open2;从右往左,open2->open1。
也不知道会不会出问题,就暂且保留吧。