带网格的输入框组件,可以用于输入密码、短信验证码等场景,通常与数字键盘组件配合使用。
支持自定义密码长度,支持加密和明文显示。
组件文件password-input.stml
-
<template>
-
<view class="password-input_container">
-
<view class="password-input_security">
-
<view class="password-input_item" v-for="(item,index) in codeArr" data-index={index} @click="codeInput">
-
<text class="password-input_item-word--hidden" v-if="this.props.passwordCode[index] && !this.props.mask"></text>
-
<text class="password-input_item-word--mask" v-if="this.props.passwordCode[index] && this.props.mask">{this.props.passwordCode[index]}</text>
-
</view>
-
</view>
-
</view>
-
</template>
-
<script>
-
export default {
-
name: 'password-input',
-
props:{
-
length:Number,
-
passwordCode:Array,
-
mask:Boolean
-
},
-
install(){
-
for (let index = 0; index < this.props.length; index++) {
-
this.data.codeArr[index]=null;
-
}
-
},
-
data() {
-
return{
-
codeArr:[]
-
}
-
},
-
methods: {
-
codeInput(e){
-
this.fire('codeClick','');
-
}
-
}
-
}
-
</script>
-
<style>
-
.password-input_container {
-
margin: 10px;
-
}
-
.password-input_security{
-
flex-flow: row nowrap;
-
height: 50px;
-
}
-
.password-input_item{
-
display: flex;
-
align-items: center;
-
flex: 1;
-
background-color: #fff;
-
height: 100%;
-
border: 0.5px solid #eee;
-
margin: -0.5px;
-
justify-content: center;
-
}
-
.password-input_item-word--hidden{
-
width: 10px;
-
height: 10px;
-
background-color: #000;
-
border-radius: 100%;
-
}
-
.password-input_item-word--mask{
-
font-size: 30px;
-
text-align: center;
-
}
-
</style>
使用示例demo-password-input.stml
-
<template>
-
<view class="page">
-
<safe-area></safe-area>
-
<text class="title">请输入6位数密码</text>
-
<password-input
-
:length={codeLength}
-
:passwordCode={passwordCode}
-
:mask={isMask}
-
oncodeClick="openKeyBoard">
-
</password-input>
-
<button class="btn">确定</button>
-
<number-keyboard
-
:limitLengh="codeLength"
-
:recnetNumber="passwordCode"
-
:isRandom="isRandom"
-
:isModel="isModel"
-
onclose="closeNumberBoard"
-
onsetNumber="getNumber"
-
ondelNumber="deleteNumber"
-
v-if="isShowNUmberBoard">
-
</number-keyboard>
-
</view>
-
</template>
-
<script>
-
import '../../components/password-input.stml'
-
import '../../components/number-keyboard.stml'
-
export default {
-
name: 'demo-password-input',
-
apiready(){
-
-
},
-
data() {
-
return{
-
codeLength:6,
-
passwordCode:[],
-
isRandom:true,
-
isShowNUmberBoard:false,
-
isModel:true,
-
isMask:false,
-
passwordCodeStr:'',
-
}
-
},
-
methods: {
-
closeNumberBoard(e){
-
this.data.isShowNUmberBoard = false;
-
},
-
getNumber(e){
-
// console.log(JSON.stringify(e));
-
this.data.passwordCode = e.detail;
-
this.data.passwordCodeStr = this.data.passwordCode.join('');
-
if(this.data.passwordCode.length==this.data.codeLength){
-
this.data.isShowNUmberBoard = false;
-
}
-
},
-
deleteNumber(e){
-
this.data.passwordCode = e.detail;
-
this.data.passwordCodeStr = this.data.passwordCode.join('');
-
},
-
openKeyBoard(e){
-
this.data.isShowNUmberBoard = true;
-
}
-
}
-
}
-
</script>
-
<style>
-
.page {
-
height: 100%;
-
background-color: #f0f0f0;
-
}
-
.title{
-
text-align: center;
-
font-size: 20px;
-
padding: 20px 0;
-
}
-
.btn{
-
margin: 10px;
-
background-color: #ff0000;
-
color: #ffffff;
-
border-radius: 10px;
-
font-size: 20px;
-
}
-
</style>