element-UIselect踩过的坑和解决办法
今天遇到了⼀个bug,就是在使⽤element-UI的select框时,当选中值,会触发@change事件,下拉框消失,但是这时候select框还是处于获取焦点状态。可以看到select框还是处于颜⾊⾼亮状态。所以当我再次点击enter框时,下拉框再次显⽰,也会再次触发@change事件。
第⼀次看到这个bug的时候我是懵逼的,因为我不知道enter键居然有等同于⿏标左键的效果。然后我试了⼏个解决⽅案,以下是我的解决⽅案及效果。jquery获取下拉框选中值
1、禁⽌select框的enter事件
@,native,prevent;@,native,prevent;但是⽆效,我百度到⼀个说法是@change使@,native,prevent;⽆效,但是我没有设置@change,@,native,prevent;也是⽆效的
我⼜尝试了设置@keyup和@keydown来监听键盘事件,但是!但是!select框⽆法监听键盘事件!!!
所以设置enter键的禁⽌⽆效
2、选中select数据后,转移页⾯焦点,使焦点不再停留在原来的选项上
我尝试当我触发@change时,⽤this.$refs.inputName.$el.focus()给其他input框添加获取焦点事件,但是这个只有第⼀次有效。
我⼜当我触发@change时,⽤this.$refs.buttonName.$el.click()给其他按钮添加获取点击事件,但是这个并没有移除select框的焦点。
我⼜尝试当我触发@change时,新建⼀个⾃动获取焦点的input框,在@change事件的最后,销毁这个input框,但是这个只有第⼀次有效。只有第⼀次奏效,只有第⼀次有效。
3、在绑定的事件上进⾏判断,阻⽌往下进⾏。
未进⾏尝试,但是是⼀个可⾏的办法
4、解决办法:给select框绑定disable,判断条件给disable赋值true或者false。
可⾏,是⽬前最完美的解决办法。