现在各种服务不是都喜欢搞一些在线的服务嘛, 我一看好家伙, vue2的element-ui.使用Vue这种框架可是难为到了我们这些脚本小子.

自动填充简单input

如上图所示,我初步就以为,一个简简单单的input嘛,直接input.value = “xxx...”不就可以了嘛.但是vue2的双向绑定机制是识别不到修改的,必须用dispatchEvent(new Event(“input”))触发一下事件.

此上的简单input还好办, 百度一下就解决了, 但是下面这个就困难了.

自动填充DatePicker

好嘛, 照着前面的直接办它,改value然后dispatchEvent(new Event(“input”)), 一看, 无效. 干! 难道是事件不对? 于是我又试了一下其他事件.

发现都无效,进而尝试focus(),blur()方法也无效.我靠,这些ui框架真是无干人事.

下文中的input指代的是dom元素

偶然发现了input.parentElement居然有个__vue__元素, 哦!我立马想起了vue的运行机制,我直接改它的value不就好了?

kua! 一改,还是失败. 经过观察,发现居然真实值在parent元素里,即input.parentElement.__vue__.$parent.value中,我这一改,嘿嘿! 页面中的数据完全被修改了,虽然vue给了我一个warning哈哈哈.

真当我心怀得意以为终于搞定了的时候, wait! 怎么我提交了, 数据还是原来的!

我们来到element-ui的这个页面中来

找呀找~ 找到了这个方法.

ok,清晰明了! 最终调用了emitInput这个方法来修改值, 我直接尝试input.parentElement.__vue__.$parent.emitInput("2022-07-10"), 一次成功.

结束!真累啊, 干嘛要修改浏览器默认行为呢?