input密码框显示与隐藏


在uni-app开发过程中,为了实现显示/隐藏密码使用了组建中的input,但是使用uni组件中的input背景不能穿透。
在这里插入图片描述

所以用原生的input实现了这个功能。

一、html部分

    <div style="margin-top: 200px;background: #42b983;width: 200px;height: 100px">
      <input :type="passwordType" v-model="password" placeholder="请输入账号"/>
      <img :src="status" alt="" @click="changeStatus()"/>
    </div>

二、js部分

初始化

  export default {
    data() {
      return {
        status:require('../src/assets/visible.png'),
        passwordType:'password',
        password:'',
        }
     }
   }

函数部分

      changeStatus(){
        this.passwordType = this.passwordType==='password'?'text':'password';
        this.status = this.status == require('../src/assets/visible.png')?require('../src/assets/unVisible.png'):require('../src/assets/visible.png');
      },

三、效果图

在这里插入图片描述
在这里插入图片描述
点击眼睛后,就能显示输入的内容了。
在这里插入图片描述
这是背景穿透后的样式

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐