<van-popup v-model="passshow">
<div class="popup">
<div class="popup_title">
<div class="popup_title_">请输入支付密码</div>
</div>
<van-password-input
:value="password"
:focused="showKeyboard"
@focus="showKeyboard = true"
/>
<div class="popup_yes" @click="onpaymentyes">确认</div>
</div>
</van-popup>
<div class="popup_">
<van-number-keyboard
:show="showKeyboard"
@input="onInput"
@delete="onDelete"
@blur="showKeyboard = false"
/>
</div>
data() {
return {
passshow: false,
showKeyboard: false,
password:"",
}
},
methods:{
onInput(key) {
this.password = (this.password + key).slice(0, 6);
},
onDelete() {
this.password = this.password.slice(0, this.password.length - 1);
},
onpaymentyes(){
console.log("确定支付"+this.password)
}
}
.popup{
width: 350px;
height: 280px;
padding-top: 16px;
text-align: center;
border-radius: 7px;
}
.van-popup--center{
border-radius: 7px;
overflow: hidden;
}
.popup_title{
height: 49px;
display: flex;
align-items: center;
justify-content: center;
font-size:16px;
font-family:Source Han Sans CN;
font-weight:500;
color:rgba(51,51,51,1);
}
.popup_title_{
text-align: center;
}
.popup_yes{
margin: 0 auto;
margin-top: 50px;
}
.popup_{
position: fixed;
bottom: 0;
z-index: 99999;
}