今天封装了一个仿密码输入的组件，效果类似于微信的支付功能
该组件支持最大6位密码。使用v-model进行了数据的双向绑定。
使用的框架是vue2！！！
功能可能还不是非常完善，不过这篇文章知识提供一下个人思路，希望对您有所帮助！！！
效果图：
父组件：
<template>
<div id="app">
<div>
<div>当前输入的密码是：{
{
password }}</div>
<div>当前的密码长度为：{
{
length }}</div>
</div>
<Tab v-model="password" :len="length" />
</div>
</template>
<script>
import Tab from "./components/Tab.vue"
export default {
name: "App",
data() {
return {
password: "",
length: 6,
}
},
components: {
Tab },
}
</script>
<style></style>
子组件：
<template>
<div @click="toFocus" class="card">
<div style="text-align: center">请输入密码</div>
<div class="group">
<div class="item" v-for="(item, index) in len">
<input
v-if="index == 0"
:value="input0"
@input="handleChange($event, 0)"
@keyup.delete="handleDelete($event, 0)"
maxlength="1"
type="password"
/>
<input
v-if="index == 1"
:value="input1"
@input="handleChange($event, 1)"
@keyup.delete="handleDelete($event, 1)"
maxlength="1"
type="password"
/>
<input
v-if="index == 2"
:value="input2"
@input="handleChange($event, 2)"
@keyup.delete="handleDelete($event, 2)"
maxlength="1"
type="password"
/>
<input
v-if="index == 3"
:value="input3"
@input="handleChange($event, 3)"
@keyup.delete="handleDelete($event, 3)"
maxlength="1"
type="password"
/>
<input
v-if="index == 4"
:value="input4"
@input="handleChange($event, 4)"
@keyup.delete="handleDelete($event, 4)"
maxlength="1"
type="password"
/>
<input
v-if="index == 5"
:value="input5"
@input="handleChange($event, 5)"
@keyup.delete="handleDelete($event, 5)"
maxlength="1"
type="password"
/>
<input
v-if="index == 6"
:value="input6"
@input="handleChange($event, 6)"
@keyup.delete="handleDelete($event, 6)"
maxlength="1"
type="password"
/>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
},
len: {
type: Number,
},
},
data() {
return {
inputRefGroup: null,
input0: "",
input1: "",
input2: "",
input3: "",
input4: "",
input5: "",
input6: "",
}
},
created() {
this.password = String(this.value)
this.password.split("").forEach((item, index) => {
this[`input${
index}`] = item
})
},
mounted() {
this.inputRefGroup = document.querySelectorAll("input")
this.inputRefGroup[this.result.length].focus()
},
methods: {
toFocus() {
if (this.inputRefGroup[this.result.length]) {
this.inputRefGroup[this.result.length].focus()
}
},
handleChange(e, num) {
this[`input${
num}`] = e.target.value
if (this.inputRefGroup[num + 1]) {
this.inputRefGroup[num + 1].focus()
} else {
alert("当前输入的密码是：" + this.result)
}
this.$emit("input", this.result)
},
handleDelete(e, num) {
this[`input${
num - 1}`] = ""
if (this.inputRefGroup[num - 1]) {
this.inputRefGroup[num - 1].focus()
}
this.$emit("input", this.result)
},
},
computed: {
result() {
return (
this.input0 +
this.input1 +
this.input2 +
this.input3 +
this.input4 +
this.input5 +
this.input6
)
},
},
}
</script>
<style>
.group {
display: flex;
align-items: center;
justify-content: center;
}
.item input {
text-align: center;
font-size: 25px;
width: 50px;
}
</style>