zoukankan      html  css  js  c++  java
  • uni-app/小程序开发实现密码输入框密码的可见与不可见切换按钮,通过点击图标实现

    <view class="input-item">
                        <view class="img">
                            <image src="../../static/icons/password.png" mode=""></image>
                        </view>
                        <view class="input-acc">
                            <input type="password" v-if="isShow" placeholder="输入您的密码" placeholder-style="color:#FFFFFF" @input="hidePassword" :value="password" maxlength="16" />
                            <input type="text" v-else placeholder="输入您的密码" placeholder-style="color:#FFFFFF" @input="password" :value="password" maxlength="16" />
                        </view>
                        <view class="see">
                            <image :src="isShow?'../../static/icons/not-show.png':'../../static/icons/show-words.png'" @tap="showPassword"
                             mode="aspectFit" style="40rpx;height:40rpx"></image>
                        </view>
                    </view>
    //编辑判断错误输入的提示信息(未完成)
    <
    view class="error-text" v-if="errorTips==1"><text class="warning-icon">!</text>{{i18n.usernameWarn}}</view>
     
    data() {
                return {
                    isShow: true,
                    inputType: "password",
                    password: "",
                };
            },
    methods: {
                //输入密码
                password(e){
                    this.password = e.detail.value;
                    // this.$apply();
                },
                //输入密码
                hidePassword(e){
                    this.password = e.detail.value;
                    // this.$apply();
                },
                // 点击小眼睛图标切换
                showPassword(){
                    if(this.isShow){
                        this.isShow = false;
                        this.inputType = "text";
                        this.$apply();
                    }else{
                        this.isShow = true;
                        this.inputType = "password";
                        this.$apply();
                    }
                },
            }
    /* 输入框 */
    .input{
        margin: 20rpx;
    }
    .input .input-item{
        display: flex;
        color: #FFFFFF;
        padding: 20rpx;
        border-bottom: 1rpx solid #e5e5e5;
        margin-top: 50rpx;
    }
    .input .input-item .img{
        margin-right: 30rpx;
    }
    .input .input-item .img image{
         46rpx;
        height: 46rpx;
        
    }
    .input .input-item .input-acc{
         100%;
    }
    
    .input .input-item .icon image{
         40rpx;
        height: 40rpx;
        /* float: right; */
    }

    参考:https://www.cnblogs.com/jikeyun/p/12372293.html

  • 相关阅读:
    学习minix 3(未完成)
    排序
    分析nat穿越(未完成)
    固定增量感知器
    分析7zip(未完成)
    分析easyVM 未完成)
    分析wrk,crk
    分析vczh的东东(未完成)
    标 题: 三维游戏里面的自动寻路的算法可能是什么样的?
    几个googlecode
  • 原文地址:https://www.cnblogs.com/yoona-lin/p/13650193.html
Copyright © 2011-2022 走看看