HarmonyOS鸿蒙Next中用vue vant写的H5在6.1.0.117手机中输入框的清除按钮无效

HarmonyOS鸿蒙Next中用vue vant写的H5在6.1.0.117手机中输入框的清除按钮无效 vue3+vant3写的h5在鸿蒙6.1.0.117的浏览器或者微信浏览器等任何地方打开，其中van-field的清除按钮点击无效，若是旁边有按钮例如更新验证码，点击清除按钮的时候会触发旁边按钮的点击事件

6 回复

1、尝试升级 vant 到最新版本

2、参考 vant github issues: van-field 点击清除按钮不生效

cke_734.png

更多关于HarmonyOS鸿蒙Next中用vue vant写的H5在6.1.0.117手机中输入框的清除按钮无效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


从现象看，不像是 Vant 的 clearable 逻辑失效，而更像是 HarmonyOS 浏览器/WebView 上发生了点击事件穿透或命中区域异常。

建议按下面几个方向验证：

1、先做最小化验证

先单独放一个输入框：

<van-field
  v-model="value"
  clearable
/>

不要放验证码按钮、Icon、Slot 等其他组件。

如果这样能正常清除，说明问题大概率出在：

  • button slot
  • right-icon
  • 自定义后缀区域
  • CSS 样式覆盖

而不是 clearable 本身。

2、检查是否有点击区域重叠

很多项目会这样写：

<template #button>
  <van-button>获取验证码</van-button>
</template>

建议看看：

.van-field__clear .van-field__button


是否存在：

```css
position: absolute;
z-index;
overflow;
transform;

导致热区覆盖。

3、尝试升级 Vant 版本

当前使用的版本是比较老的 3.x 版本，建议升级到最新版本验证一下。

4、临时绕过方案

不要使用：

clearable

改成自定义清除按钮：

<template #right-icon>
  <van-icon
    name="cross"
    @click.stop="value=''"
  />
</template>

这样可以验证：

  • 是 HarmonyOS 浏览器问题
  • 还是 Vant clearable 的兼容问题

5、验证是否是鸿蒙特定版本问题

建议测试：

  • HarmonyOS 5.x
  • HarmonyOS 6.0
  • HarmonyOS 6.1.0.117

如果只有：

6.1.0.117

出现问题，那更像是系统 Web 内核兼容性问题。

从你描述的“点击清除按钮会触发旁边获取验证码按钮”来看，我会优先怀疑点击热区重叠或事件穿透，建议先从最小 Demo 和自定义清除按钮两个方向验证。

首先鸿蒙 ArkWeb 是基于 Chromium 内核，支持 W3C 标准的 Touch Events、Pointer Events。按照你说的现象，可能是某些版本下，鸿蒙浏览器对 touch事件和 click事件的分发策略与 iOS/Android 存在细微差异，可能放大了事件穿透的效应。

要解决问题的话，你可以通过 CSS 确保清除按钮的 z-index足够高，且点击区域不被旁边的按钮遮挡，比如提升清除按钮的层级：

.van-field__clear {
  position: relative;
  z-index: 9999;
  /* 扩大点击热区，防止误触旁边按钮 */
  padding: 4px;
  margin-right: 4px;
}

或者考虑自定义右侧清除图标，抛弃组件自带 clearable 属性。应该也可以

鸿蒙的浏览器内核就是Chrome内核，你可以在谷歌浏览器上试试，应该可以复现出现。

清除按钮无效是Vant组件在特定WebView版本下对input事件处理不完整导致的。鸿蒙Next系统WebView对search类型输入框的x按钮（clear）触发逻辑与标准不同，Vant未适配。可检查van-field是否显式设置clearable属性且禁用原生清除。若仍无效，需替换为自定义清除图标手动控制。

这是鸿蒙系统 WebView 点击事件穿透的已知适配问题，主要由清除按钮的 touch/click 事件在渲染时冒泡或被错误分发到下层元素造成。解决办法：用插槽自定义清除图标，并用 @touchstart.prevent.stop 阻止冒泡和默认行为。

<van-field v-model="value" placeholder="请输入">
  <template #right-icon>
    <van-icon
      v-if="value"
      name="clear"
      @touchstart.prevent.stop="value = ''"
      style="pointer-events: auto;"
    />
  </template>
</van-field>

注意需配合 clearable 关闭原生清除按钮，并通过 v-if="value" 控制显隐。如仍需原生样式，可通过全局 CSS 强制覆盖 van-field__clear 的 pointer-events 并在父层捕获事件。

回到顶部