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

閉丄眼聆厛倖輻

于 2021-07-31 14:49:52 发布

阅读量424

点赞数

CC 4.0 BY-SA版权

分类专栏： vue Js 文章标签： vue js

本文链接：https://blog.youkuaiyun.com/weixin_52005030/article/details/119275648

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在这里插入图片描述

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

<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