创建一个web端的支付密码输入框

最新推荐文章于 2024-03-08 15:45:02 发布

原创

最新推荐文章于 2024-03-08 15:45:02 发布 · 440 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

本文介绍如何利用Vue.js技术实现一个用于支付场景的密码输入框组件。通过封装组件，可以在项目中方便地复用该功能。

效果图在这里插入图片描述

在这里插入图片描述

直接上代码
直接封装成一个组件,哪里需要就直接调用就可以了

<template>
  <div class="am-payPwd" :id="`ids_${id}`">
    <input
      type="password"
      readonly
      onfocus="this.removeAttribute('readonly');"
      maxlength="1"
      autocomplete="new-password"
      @input="changeInput"
      @click="changePwd"
      v-model="pwdList[i]"
      @keyup="keyUp($event)"
      @keydown="oldPwdList = pwdList.length"
      class="shortInput"
      v-for="(v, i) in 6"
      :key="i"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      pwdList: [],
      oldPwdList: [],
      isDelete: false,
      ipt: "",
      active: -1,
    };
  },
  props: {
    id: {
      type: Number,
      de