uni-app 中需手动实现 input 清除按钮：用 v-model 绑定 value，绝对定位添加可点击的清除图标（如 ×），@tap 触发 this.inputValue = ''；clearable 不跨平台生效，H5/App 均无效，须自定义方案。
uni-app 的 input 怎么加清除按钮并点击就清空？
uni-app 原生 input 组件本身不支持点击右侧图标直接清空（不像微信小程序的 clearable 属性），必须手动实现。核心是：用 value 双向绑定 + 自定义清除图标 + @tap 触发赋值为空字符串。
常见错误是只加了图标但没绑定 value，或用了 @click 而非 @tap（在 iOS 上可能不响应）。
- 确保
input使用v-model或:value+@input双向控制 - 清除图标需绝对定位在 input 右侧，用
position: absolute+right/top微调 - 图标区域必须可点击，推荐用
- 清空逻辑写在方法里，执行
this.inputValue = ''，不要用$refs操作 DOM
为什么 clearable 在 uni-app 里不生效？
因为 clearable 是微信小程序原生 input 的属性，uni-app 编译到 H5、App 或其他小程序平台时，并不会透传该属性——它只在「微信小程序平台」且使用 custom-component 模式时才可能部分兼容，但稳定性差，官方文档也未承诺支持。
所以跨平台项目中硬写 clearable，在 H5 上完全无效，在 App 端可能报错或静默忽略。
- uni-app 的
input是封装层，底层渲染目标不同（H5 用标签，App 用原生控件，各小程序用各自语法） - 想兼容所有平台，必须走自定义方案，不能依赖平台特有属性
- 如果只开发微信小程序，可用
platform: 'mp-weixin'条件编译 + 原生clearable，但会牺牲可维护性
清除按钮点击没反应？检查这几点
最常踩的坑不是逻辑写错，而是事件捕获或样式遮挡导致 @tap 根本没触发。
- 父容器是否设置了
overflow: hidden，把清除图标裁掉了？用 Chrome DevTools 检查元素是否真实存在且可点击 - 清除图标的
z-index是否被 input 内容层盖住？确保图标的z-index高于 input 文本内容（通常设为 2 即可） - 是否在
input外层套了form或其它组件，意外阻止了事件冒泡？加个console.log在 tap 方法开头验证是否进得去 - H5 端注意：
cursor: pointer要加在清除图标上，否则用户看不出可点；App 端则要确认图标区域足够大（建议最小 40rpx × 40rpx）
要不要用 uni-icons 或自定义字体图标？
可以，但别为了图标引入整套 uni-ui。轻量做法是直接用 Unicode 字符（如 ×）或 base64 小图，避免额外请求和体积膨胀。
示例片段：
<view class="input-wrapper"><input v-model="searchText" class="search-input" placeholder="搜索..."><view v-if="searchText" class="clear-icon">×</view></view>
对应样式关键点：
.input-wrapper {
position: relative;
}
.search-input {
padding-right: 40rpx;
}
.clear-icon {
position: absolute;
right: 12rpx;
top: 50%;
transform: translateY(-50%);
font-size: 32rpx;
color: #999;
width: 36rpx;
height: 36rpx;
line-height: 36rpx;
text-align: center;
border-radius: 50%;
}
这里 line-height 和 text-align 比用 uni-icons 更快更稳，尤其在低端安卓机上。
真正麻烦的不是加按钮，而是让这个按钮在各种屏幕宽度、输入法弹出、软键盘顶起视图时依然对齐、可点、不闪跳——这些细节比逻辑本身更耗时间。
