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;
    },
相关推荐
2501_915918413 小时前
iOS 混淆流程 提升 IPA 分析难度 实现 IPA 深度加固
android·ios·小程序·https·uni-app·iphone·webview
前端 贾公子4 小时前
解决uni-app 输入框,键盘弹起时页面整体上移问题
前端·vue.js·uni-app
Muchen灬4 小时前
【uniapp】(5) 创建gitee仓库并推送源码
gitee·uni-app
Muchen灬4 小时前
【uniapp】(6) uniapp中使用vuex
uni-app
2501_915909065 小时前
React Native 上架 App Store:项目运行与审核构建的流程
android·ios·小程序·https·uni-app·iphone·webview
李庆政3705 小时前
uniapp+unicloud打包部署微信小程序
微信小程序·小程序·uni-app
2501_9160074714 小时前
网站爬虫原理,基于浏览器点击行为还原可接口请求
前端·javascript·爬虫·ios·小程序·uni-app·iphone
Можно16 小时前
uni.request 和 axios 的区别?前端请求库全面对比
前端·uni-app
woshinon1 天前
【Uniapp(HBuilderX)针对微信小程序和H5平台实现差异化配置(自定义发行)】
微信小程序·小程序·uni-app