uni-app 中 input 无法动态切换 type 是因 iOS/Android 原生限制，推荐用固定 type="password" + show-password 属性实现明密文切换，兼容性好；若必须切换 type，则需双 input + v-if + 手动聚焦。
uni-app 中 input 切换 type="text" 和 type="password" 的核心限制
uni-app 的 input 组件在 iOS 和部分 Android 原生渲染下，type 属性是只读的——运行时动态修改 type 不会触发 UI 更新，输入框仍保持原始类型（比如始终显示为密码），这是最常被卡住的地方。
根本原因不是写法错，而是底层 WebView 或原生组件不支持 type 动态切换。所以不能依赖单纯改 :type 绑定值来实现「点击切换」。
用 password + show-password 属性替代 type 切换（推荐方案）
uni-app 自 3.0+ 版本起，input 原生支持 show-password 布尔属性（仅对 type="password" 有效），它会自动控制右侧「眼睛图标」和明文/密文切换逻辑，且兼容所有平台。
实操建议：
- 固定
type="password"，只绑定show-password - 用
v-model或@input同步输入值，无需手动干预 type - 图标点击事件直接切换
isShowPassword布尔值即可
<input type="password" :show-password="isShowPassword" v-model="password" placeholder="请输入密码" /> <icon :type="isShowPassword ? 'eye-filled' : 'eye'" @click="isShowPassword = !isShowPassword" />
手动实现 type 切换的兼容写法（仅限必须自定义场景）
如果因 UI 规范或历史原因必须用 type="text"/type="password" 切换（比如不要默认眼睛图标、要自定义按钮位置），需绕过原生限制：
- 用两个
input元素（一个type="text"，一个type="password"），通过v-if/v-else控制显隐 - 共享同一个
v-model变量，确保值同步 - 切换时手动聚焦到新显示的 input（否则光标丢失）
- 注意：iOS 下频繁切换可能触发键盘闪退，建议加
v-show+ref聚焦优化
<input v-if="!isShowPassword" ref="pwdInput" type="password" v-model="password" @focus="onFocus" /> <input v-else ref="textInput" type="text" v-model="password" @focus="onFocus" />
容易忽略的细节和坑
实际开发中这几个点最容易出问题：
-
show-password在 H5 端依赖浏览器原生<input type="password">的showPassword行为，部分老版 UC/QQ 浏览器不支持，需降级兜底 - 手动切换 type 时，Android 微信 WebView 下
focus()可能失效，建议加$nextTick延迟调用 - 密码框内容在 type 切换瞬间可能被清空（尤其用
v-if时），务必用同一v-model绑定，避免用value+@input分离管理 - App 端若开启「软键盘适配」，切换 type 可能导致键盘收起再弹出，体验割裂，优先走
show-password方案
真正要做的不是“怎么切 type”，而是接受 uni-app 的设计约束，用它认可的方式达成目标——show-password 是官方收敛过的解法，比自己 hack 更稳。
