uniapp密码输入框

最新推荐文章于 2026-01-09 09:59:49 发布

原创

最新推荐文章于 2026-01-09 09:59:49 发布 · 5.1k 阅读

uniapp自定义密码输入框

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

文章目录

- uniapp自定义密码输入框
- - 效果图
  - 定义组件
  - - template
    - js
    - scss
  - 使用
  - - template
    - js

效果图

在这里插入图片描述

定义组件

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

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: