直接用 dom 的方式可以修改输入框内容,但是不能触发 Vue 内部响应式,vue 项目最后也无法获取输入框内的值
请问有什么方式 ,可以让 js 模拟输入事件 ,操作表单内容
1
LeeReamond 2022-03-10 14:38:41 +08:00 via Android
不是很熟悉 vue 代码,不过如果是 vue2 项目的话理论上你去找对应绑定的数据结构,他是一个被 vue 劫持后的数据,本身带有 getter 和 setter 触发响应式,显示调用大概可解
|
3
ochatokori 2022-03-10 14:52:24 +08:00 via Android
先获取 dom ,再用 dom.__vue__拿到 vue 组件实例,然后想怎么改就怎么改
|
4
LieFlatjune OP @ochatokori 刚刚亲测这个方法是可以的,不过得拿最外层的组件才可以。👍👍👍👍👍
|
5
LieFlatjune OP @LeeReamond 3 楼的方法可以
|
6
ochatokori 2022-03-10 16:03:58 +08:00 via Android
@LieFlatjune #4 不一定是最外层,只要是 vue 组件的顶层都可以,换句话说就是组件实例的$el 绑定的元素
|
8
WhateverYouLike 2022-03-10 20:42:09 +08:00
是的,只要拿到 Vue 实例就可以。最近因为要把原生 JS 和 build 后的 Vue 组件揉到一起,也碰到这样的问题。
|
9
weixiangzhe 2022-03-11 13:54:20 +08:00
|
10
weixiangzhe 2022-03-11 13:54:36 +08:00
需要自已触发一个事件
```js const mouseClickEvents = ['mousedown', 'click', 'mouseup']; function simulateMouseClick(element){ mouseClickEvents.forEach(mouseEventType => element.dispatchEvent( new MouseEvent(mouseEventType, { view: window, bubbles: true, cancelable: true, buttons: 1 }) ) ); } var element = document.querySelector('div[class="UFIInputContainer"]'); simulateMouseClick(element); ``` 来自 https://stackoverflow.com/questions/40091000/simulate-click-event-on-react-element |