9 changed files with 197 additions and 34 deletions
-
6components/lf-payPassword/lf-payPassword.vue
-
99components/smh-pwd/smh-pwd.vue
-
2pages/article/details.vue
-
2pages/business/login/login.vue
-
8pages/index/index/index.vue
-
104pages/order/confirm/confirm.vue
-
6pages/point/shoppingMall/shoppingMall.vue
-
2pages/shop/goodsdetail.vue
-
2pages/user/loginType/loginType.vue
@ -0,0 +1,99 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<view class="action"> |
||||
|
<view class="pwd" @click="changeStatus"> |
||||
|
<view v-for="(item,index) in unit" :class="{pwd1:pwd.length>=(index+1)}" class="number"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="input1"> |
||||
|
<input :maxlength="unit" @input="change1" v-model="pwd" v-show="true" type="number" :focus="inputStatus" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
props:{ |
||||
|
unit:{ |
||||
|
type:Number, |
||||
|
default:6 |
||||
|
}, |
||||
|
focus:{ |
||||
|
type:Boolean, |
||||
|
default:false |
||||
|
}, |
||||
|
ontime:{ |
||||
|
type:Boolean, |
||||
|
default:false |
||||
|
} |
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
inputStatus:this.focus, |
||||
|
pwd:"", |
||||
|
pwd1:[] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
changeStatus(){ |
||||
|
this.inputStatus=!this.inputStatus |
||||
|
}, |
||||
|
change1(e){ |
||||
|
this.pwd1=String(e.target.value).split('') |
||||
|
if(this.ontime){ |
||||
|
this.$emit('change',e.target.value) |
||||
|
}else{ |
||||
|
if(this.pwd1.length==this.unit){ |
||||
|
this.$emit('change',e.target.value) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.action{ |
||||
|
width:690rpx; |
||||
|
margin: 0 auto; |
||||
|
.pwd{ |
||||
|
width:100%; |
||||
|
height: 80rpx; |
||||
|
margin: 20rpx auto; |
||||
|
border: 1px solid #e5e5e5; |
||||
|
display: flex; |
||||
|
margin-bottom: 40rpx; |
||||
|
.number{ |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex: 1; |
||||
|
position: relative; |
||||
|
border-right: 1px solid #e5e5e5; |
||||
|
&:last-child{ |
||||
|
border: 0; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.pwd1{ |
||||
|
&::after{ |
||||
|
position: absolute; |
||||
|
content: ""; |
||||
|
width: 20rpx; |
||||
|
height: 20rpx; |
||||
|
border-radius: 50%; |
||||
|
background-color: #000; |
||||
|
} |
||||
|
// &:nth-last-child{ |
||||
|
// &::after{ |
||||
|
|
||||
|
// } |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.input1{ |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue