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;
    },
相关推荐
homelook1 天前
uniapp蓝牙demo
uni-app
2501_915909062 天前
手机崩溃日志导出的工程化体系,从系统级诊断到应用行为分析的多工具协同方法
android·ios·智能手机·小程序·uni-app·iphone·webview
郑州光合科技余经理2 天前
技术视角:海外版一站式同城生活服务平台源码解析
java·开发语言·uni-app·php·排序算法·objective-c·生活
wangdaoyin20102 天前
UniApp中使用LivePlayer进行视频或在流媒体播放
uni-app·liveplayer·h5播放视频
2501_915106322 天前
App HTTPS 抓包实战解析,从代理调试到真实网络流量观察的完整抓包思路
网络协议·http·ios·小程序·https·uni-app·iphone
游戏开发爱好者82 天前
苹果App Store应用程序上架方式全面指南
android·小程序·https·uni-app·iphone·webview
2501_916008892 天前
深入理解 iPhone 文件管理,从沙盒结构到开发调试的多工具协同实践
android·ios·小程序·https·uni-app·iphone·webview
一室易安2 天前
解决使用 UniApp 搭配 Vue3 小程序开始 使用uview-plus 的返回顶部up-back-top中onPageScroll 不触发的问题
小程序·uni-app
yilan_n2 天前
鸿蒙应用上传
vue.js·华为·uni-app
yilan_n2 天前
【UniApp实战】手撸面包屑导航与路由管理 (拒绝页面闪烁)
前端·javascript·vue.js·uni-app·gitcode