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;
    },
相关推荐
曼荼罗poisonous21 小时前
uniapp打包出现Manifest.json文件配置错误
uni-app
2501_915921431 天前
如何将 iOS 应用的 IPA 文件安装到手机进行测试
android·ios·智能手机·小程序·uni-app·iphone·webview
2501_916008891 天前
不连 Xcode,也能把 iPhone App 的实时日志看清楚
android·ios·小程序·https·uni-app·iphone·webview
小CC吃豆子1 天前
uni-app 上架 iOS 时常见的审核被拒原因有哪些?
ios·uni-app
小钟不想敲代码1 天前
uni-app基础入门
uni-app
郑州光合科技余经理1 天前
技术架构:上门服务APP海外版源码部署
java·大数据·开发语言·前端·架构·uni-app·php
HashTang2 天前
【AI 编程实战】第 6 篇:告别复制粘贴 - 设计一个优雅的 HTTP 模块
前端·uni-app·ai编程
iOS阿玮2 天前
苹果开发者账号申请的痛点,包含新限制说明!
uni-app·app·apple
2501_915921432 天前
iOS App 中 SSL Pinning 场景下代理抓包失效的原因
android·网络协议·ios·小程序·uni-app·iphone·ssl
雪芽蓝域zzs2 天前
uniapp 获取app版本信息(兼容鸿蒙)
uni-app