uniapp密码输入框

uniapp自定义密码输入框

可用于小程序短信验证码输入框、密码数字框…

效果图

定义组件

提示： 这里把输入框定义为组件，其他可根据需求调整

template

<template>
	<view>
		<view class="password-input-warp fcc">
			<view class="password-input_item fcc" :style="{width: width +'rpx', height: height +'rpx', backgroundColor: backgroundColor}"
				@click="focus = true" v-for="(item, index) in length" :key="index">
				<view class="num" :class="txtStatus ? 'txtColor' : ''" :style="{fontWeight : bold ? 'bold' : 'normal'}" v-if="password.length > index">
					{{ showVal ? password[index] : placeholder }}
				</view>
				<view class="line animation" v-if="password.length == index">|</view>
			</view>

			<input class="input" type="number" :focus="focus" v-model="password" :maxlength="length" @focus="focus = true"
				@blur="focus=false" @input="passwordInput" />
		</view>
	</view>
</template>

js

<script>
	export default {
		data() {
			return {
				focus: false,
				password: ''
			}
		},
		props: {
			width: {
				type: [Number, String],
				default: 100,
			},
			height: {
				type: [Number, String],
				default: 100,
			},
			backgroundColor: {
				type: String,
				default: "#FFF"
			},
			bold: { // 是否加粗
				type: Boolean,
				default: true
			},
			showVal: { // 是否明文
				type: Boolean,
				default: false
			},
            placeholder: { // 占位
				type: String,
				default: "*"
			},
			length: { // 密码框长度
				type: Number,
				default: 6
			},
			txtStatus: {
				type: Boolean,
				default: false
			}
		},
		methods: {
            /**
             * 监听input事件
             */
			passwordInput(e) {
				this.$emit('update:value', this.password);
				if (e.detail.value.length == this.length) {
					this.focus = false
					this.$emit('confirm')
				}
			},
            /**
             * 清空内容
             */
            clearInput() {
                this.password = '';
            }
		}
	}
</script>

scss

<style lang="scss" scoped>
	.password-input-warp {
		position: relative;
		.password-input_item {
			margin-right: 10rpx;
			text-align: center;
            line-height: 100rpx;
            @include sc(40rpx, $fc3);
            border-radius: 14rpx;
			border: 1rpx solid #EFEFEF;
			box-shadow: 0px 1px 2px 1px rgba(16, 24, 40, 0.05);

			&:last-child {
				margin-right: 0;
			}
			
			.num {
				@include sc(72rpx, $fc6);
			}
			.txtColor {
				color: #F52622;
			}
			
			.line {
				font-weight: normal;
				font-size: 40rpx;
				height: 80rpx;
				line-height: 76rpx;
			}
			
			.animation {
				opacity: 0;
				animation-name: line;
				animation-timing-function: linear;
				animation-iteration-count: infinite;
				animation-duration: .5s;
				animation-direction: alternate;
			}

			@keyframes line {
				0% {
					opacity: 1;
				}

				100% {
					opacity: 0;
				}
			}
		}

		.input {
			position: absolute;
			top: 0;
			left: -100%;
			height: 100%;
            opacity: 0;
            color: transparent;
		}
	}
</style>

使用

这里展示使用组件，其他的请忽略

template

<template>
	<view class="container">
		<button class="comfirmBtn" @click="withdrawTap">申请提现</button>
		
        <view class="code-popup-wrap">
			<uni-popup ref="codePopup" type="center">
				<view class="popup-content tc">
					<view class="close fcc bold" @click="closeTap">
						<text class="iconfont iconclose"></text>
					</view>
					<view>手机验证</view>
					<view class="ft24 fc6 pdt10 pdb20">为了您的资产安全，请输入验证码进行安全验证</view>
					<view class="tel bold">{{mobile | mobileFormat}}</view>
                    
                    <!-- 使用组件 -->
					<custom-code-input
						:value.sync="code" 
						showVal
						:length="4"
						@confirm="codeInputTap"
						:txtStatus="isCodeColor"
                        ref="code"
					></custom-code-input>
                    
					<view class="ft22 fc6 tr code" @click="getCodeTap">{{codeTxt}}</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

js

<script>
	import customCodeInput from '../../components/custom-code-input/custom-code-input.vue'
	
	export default {
		data() {
			return {
				code: '',
				codeTxt: '获取验证码',
                isCodeColor: false,
                mobile: '18899998888'
			}
		},
		components: {
			customCodeInput
		},
        methods: {
            openCodeTap() {
				this.$refs.codePopup.open();
			},
			withdrawTap() {
				// if(!this.isVerify()) {
				// 	return false
				// };
				
				this.$refs.codePopup.open();
				this.getCodeTap();
			},
            /**
            * 接收子组件传递值
            */
			codeInputTap() {
				console.log('获取输入内容', this.code);
				// 执行 申请提现业务
			},
            /**
             * 清除子组件输入框值
             */
            clearInputValTap() {
                this.$refs.code.clearInput();
            },
			closeTap() {
				this.$refs.codePopup.close();
			},
            getCodeTap() {
                // 发送请求，执行发送验证码的接口、根据需求处理业务
            }
        },
        filters: {
			mobileFormat(mobile) {
				if (mobile) {
					return mobile.substring(0, 3) + '****' + mobile.substring(7)
				}
				return '';
			}
		}
    }
</script>