vue封装密码组件

今天封装了一个仿密码输入的组件，效果类似于微信的支付功能
该组件支持最大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>