uniapp 踩坑:u--input 插槽不显示、u-input 插槽正常

一、先记结论

uView2 对 Input 组件做了 NVUE / 非 NVUE 双端拆分，两个组件不是通用互换：

普通页面（H5 / 小程序）：只能用 u-input 才有插槽

NVUE 原生页面（App 原生渲染）：只能用 u--input 才有插槽

核心坑点：

在普通 vue 页面强行写 u--input，插槽天生不渲染、不报错、不提示，肉眼看就是“失效”

二、现象复现

// vue 页面<u-inputplaceholder="请输入内容">  <viewslot="prefix">🔍</view>  <viewslot="suffix">清空</view></u-input>

// vue页面<u--inputplaceholder="请输入内容">  <viewslot="prefix">🔍</view></u--input>

带横杠的 u--input 是专门给 App-NVUE 原生页面用的专属组件

三、常见误区

1、混用 Vue3 v-slot 语法

uniapp 插槽不要用 #suffix / v-slot，在部分端直接失效。

❌ 错误

<template #suffix>  <text>测试</text></template>

✅ 统一写法（全端兼容）

<viewslot="suffix">测试</view>

2、开启 clearable / password 抢占插槽

开启清除按钮、密码眼睛后，suffix 插槽会被系统原生按钮覆盖，看似插槽失效。

<u-inputclearableplaceholder="占位符">  <viewslot="suffix">我显示不出来</view></u-input>

解决：自定义右侧按钮，关闭 clearable，二选一使用。

3、样式遮挡、宽高为 0

插槽内容无尺寸、透明、父级 overflow:hidden，会导致“渲染了但看不见”。

快速测试：给插槽加背景色占位

<viewslot="prefix"style="width:30rpx;height:30rpx;background:red;"></view>

四、排查

插槽不显示，按顺序自查即可：