uni-app cli nvue input绑定click事件后无法输入内容 且安卓平台无法触发冒泡事件

uni-app cli nvue input绑定click事件后无法输入内容 且安卓平台无法触发冒泡事件

开发环境 版本号 项目创建方式
Windows win10 CLI

测试过的手机

ios15 安卓10

示例代码：

<input [@click](/user/click)="test" />  

function test(){}
8 回复

此bug只有在nvue ios和安卓上有。其它平台没有。

更多关于uni-app cli nvue input绑定click事件后无法输入内容 且安卓平台无法触发冒泡事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


input 不用加value属性或是v-model吗，大佬

加不加都一要的。另外我重新描述了下，此bug其实是，两个bug在一起。可以看下我的新描述

暂时无法复现，请上传demo或者视频。

我单独开了个事件冒泡问题https://ask.dcloud.net.cn/question/145692，仅安卓上表现。

修复了吗

啋坑记：如果有遇到此问题的各位请不要 在nvue上input组件上绑定click事件。暂时官方修复时间不明确

在 uni-app 中使用 nvue 时，input 组件绑定 click 事件后无法输入内容，并且安卓平台无法触发冒泡事件，可能是由于 nvue 的平台差异和事件处理机制导致的。以下是一些可能的解决方案和排查步骤：

1. click 事件冲突

input 组件绑定 click 事件可能会导致输入框无法正常获取焦点，从而无法输入内容。click 事件可能会干扰输入框的默认行为。

解决方案：

  • 尝试使用 focus 或 blur 事件来替代 click 事件。
  • 如果必须使用 click 事件，可以在事件处理函数中手动调用 input.focus() 来确保输入框获取焦点。
<template>
  <input ref="input" @click="handleClick" />
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$refs.input.focus();
      // 其他逻辑
    }
  }
}
</script>

2. 安卓平台事件冒泡问题

在安卓平台上，nvue 的事件冒泡机制可能与 vue 不同，导致事件无法正常冒泡。

解决方案：

  • 确保事件绑定正确，并且父组件能够正确捕获事件。
  • 如果事件冒泡仍然无法触发，可以尝试在父组件中手动监听子组件的事件。
<template>
  <view @click="handleParentClick">
    <input @click="handleChildClick" />
  </view>
</template>

<script>
export default {
  methods: {
    handleChildClick() {
      // 子组件逻辑
    },
    handleParentClick() {
      // 父组件逻辑
    }
  }
}
</script>

3. 使用 nvue 的特定事件

nvue 在某些情况下可能需要使用特定的事件来处理用户交互。例如，input 组件在 nvue 中可能需要使用 input 或 change 事件来监听输入内容的变化。

解决方案：

  • 确保使用 nvue 支持的事件类型来监听用户输入。
<template>
  <input [@input](/user/input)="handleInput" />
</template>

<script>
export default {
  methods: {
    handleInput(event) {
      console.log(event.detail.value);
    }
  }
}
</script>
回到顶部