想要查看前面的笔记请翻阅我的CSDN博客，作者码字不易，喜欢的话点赞，加个关注吧，后期还有很多干货等着你！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vant</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css">
<style>
.van-popup {
transform: none;
}
.pay_password {
background: #FAFAFA;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 63%;
}
.password_input {
position: fixed;
left: 0;
bottom: 250px;
width: 100%;
}
</style>
</head>
<body>
<div id="app">
<van-popup v-model="show">
<div class="pay_password" >
<!-- 密码输入框 -->
<div class="password_input">
<p style="text-align: center">支付</p>
<van-password-input
:value="value"
/>
</div>
<!--键盘-->
<van-number-keyboard
:show="show"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
</div>
</van-popup>
</div>
</body>
<!-- 引入组件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
value: '',
showKeyboard: true,
show: true
},
watch: {
value(value){
if (value.length === 6 ) {
}
}
},
methods: {
onInput(key) {
this.value = (this.value + key).slice(0, 6);
},
onDelete() {
this.value = this.value.slice(0, this.value.length - 1);
}
}
})
</script>
</html>