uniapp 密码框的眼睛

效果展示:

uniapp input 官网链接:链接

按照官方文档,uni-icon出不来。

通过自己的方法解决了,解决方案如下:

代码:

html 复制代码
                 <uni-forms-item name="password">
                    <input
                      class="uni-input"
                      placeholder="请输入密码"
                      :password="!showPassword"
                      v-model="loginInfo.password"
                    />
                    <uni-icons
                      type="eye"
                      size="30"
                      @click="changePassword"
                      color="rgb(2 ,135, 253)"
                      v-if="showPassword"
                    ></uni-icons>
                    <uni-icons
                      type="eye-slash"
                      size="30"
                      @click="changePassword"
                      v-else
                    ></uni-icons>
                  </uni-forms-item>

思路如下:

通过v-if控制显示不同的眼睛(即选中/未选中状态)

javascript 复制代码
//js方法
    changePassword() {
      console.log("chick showPassword>>>", this.showPassword);
      this.showPassword = !this.showPassword;
    },
相关推荐
梦曦i4 小时前
uni-router v1.1.1发布:守卫超时保护+路由监听
前端·uni-app
梦曦i9 小时前
全面解析uni-router v1.2.0功能
前端·uni-app
不如摸鱼去11 小时前
Wot UI 2.1.0 发布:ConfigProvider 全局配置能力升级
ui·小程序·uni-app
PedroQue9912 小时前
uni-router:uni-app路由管理新选择
前端·uni-app
这是个栗子13 小时前
微信小程序开发(九)- uni-app微信小程序商城
微信小程序·小程序·uni-app·vue·vuex
中犇科技17 小时前
2026商城APP开发公司 TOP5(电商垂直版)
uni-app
扁豆的主人17 小时前
Uniapp如何构建和部署
uni-app
hhzz18 小时前
Uniapp项目中解决一个比较典型的图标渲染问题:原生 tabBar(pages.json 里配置的那种)
uni-app·json
小徐_23331 天前
Wot UI 2.1.0 发布:ConfigProvider 全局配置能力升级
前端·uni-app
qq_229933132 天前
uniapp踩坑-组件嵌套子组件不触发onReachBottom事件
uni-app