Tencent / kbone

一个致力于微信小程序和 Web 端同构的解决方案
Other
4.8k stars 457 forks source link

wx-input 组件 触发input 事件的时候,没监听事件返回值,以及不会同步外部value的值。 #463

Closed aa875982361 closed 1 year ago

aa875982361 commented 1 year ago

微信input文档 我看了微信的文档,发现有事件返回值,通过事件返回值可以替换掉input的问题。

现在的input 好像有个问题,就是我外部传入的value 没有改变,然后input的值修改了,是不会使用外部的值。 举个例子: <wx-input :value="diyValue" @input="handleInput" /> 初始值:diyValue = 50 input修改后: input.value = 51 触发handleInput
因为设置了最大值 所以还是设置最大值为50 setData({ diyValue: 50 }) 虚拟dom树 没监听到有修改,所以不会触发input 节点更新 导致input.value 的值 还是51

JuneAndGreen commented 1 year ago

kbone 中可以直接使用 input,不需要 wx-input,这里兼容到了 html 的 input 标签。然后 web 中的某些事件和小程序事件模型会不同,比如 web 中 input 事件的冒泡处理,所以没有支持这个“返回值替换”的特性。

你的场景我试了下,在 input 标签的 input 事件中修改 evt.currentTarget.value 是表现正常的:

<input type="text" :value="50" @input="onInput" />
onInput(evt) {
      const value = evt.currentTarget.value
      if (parseInt(value, 10) > 50) evt.currentTarget.value = 50
    },

只是这里是异步 setData input 的 value,所以修改过程会闪一下;当然如果你是使用 vue 的话,也可以使用 vue 的 v-model,效果是一样的。

如果你实在需要原生的写法,可以通过 使用小程序自定义组件 的方式,将某些代码用原生编写,然后嵌入到 kbone 页面中。

aa875982361 commented 1 year ago

明白