必须同时满足html结构、模块加载、切换重绘三条件：外层用layui-input-wrap容器，图标放layui-input-prefix内且与input同级；layui.use需显式加载form模块；type切换后立即调用form.render('input')。

直接加 lay-affix="eye" 属性，但必须满足 HTML 结构和模块加载两个硬性条件，否则图标不显示、点击无反应、切换后样式错乱。

HTML 容器结构必须用 layui-input-wrap

不是随便包个 div 就行。Layui 的 eye 功能只认标准容器，否则图标渲染失败或点击无效：

• 外层必须是 <div class="layui-input-wrap"> <li>图标需放在 <code><div class="layui-input-prefix"> 内，且使用 <code><i class="layui-icon layui-icon-password"></i>
• <input> 必须和图标同级，且在同一个 layui-input-wrap 下
• 错误写法：<div class="layui-form-item"> <input><i></i> </div> —— 图标会错位或不响应

form 模块必须显式加载且顺序正确

哪怕页面其他地方用了 form，只要没在当前 layui.use() 中声明，eye 功能就完全失效：


深蓝色网站后台管理系统layui框架模板-AdminPro
一款深蓝色网站后台管理系统layui框架模板
下载
• 必须写成 layui.use(['form', 'layer'], function(){...})，form 不能漏，也不能放后面
• 如果只写 layui.use(['layer'])，控制台会报 Cannot read property 'on' of undefined
• Layui 2.x 不支持 lay-show-password 属性，别混用——写了这个又手动绑 click，图标会重复、事件冲突

type 切换后必须调 form.render('input')

仅改 type 属性不会重绘边框、圆角、图标状态，视觉和行为都会断裂：

• 切完 type 后立刻执行 layui.form.render('input')，不要加 setTimeout 或等 nextTick
• 不要用 el.type = 'text'，某些旧浏览器不支持；改用 el.setAttribute('type', 'text')
• 如果密码框带 lay-verify="required"，切换后没调 form.render('input')，校验框可能错位或失去焦点

最易忽略的一点：Layui 3.x 虽然实验性支持 lay-show-password="true"，但它依赖额外模块 password，且未进正式文档——生产环境建议统一用 2.x 手动方案，稳定可控。结构、加载、重绘，三者缺一不可。