vant中,van-dropdown-menu-item中open和close事件的顺序

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 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。

也不知道会不会出问题,就暂且保留吧。

相关文档
最新文档