vue如何实现键盘输入支付密码功能-创新互联

小编给大家分享一下vue如何实现键盘输入支付密码功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

支付密码功能界面如下图：

主要代码如下：

 .pay-tool {
  position: relative;
  height: 18.93333333rem;
  background-color: #fff;
  overflow: hidden;
  &-title {
   width: 100%;
   height: 2.08888888rem;
   padding: 0 0.8rem;
   line-height: 2.08888888rem;
   text-align: center;
   overflow: hidden;
   .icon {
    float: left;
    margin-top: 0.72222222rem;
   }
   strong {
    font-size: 0.8rem;
   }
  }
  &-content {
   .pay-tool-inputs {
    width: 14.46666666rem;
    height: 2.31111111rem;
    margin: 1.28888888rem auto 0;
    border: 1px solid #b9b9b9;
    border-radius: 0.26666666rem;
    box-shadow: 0 0 1px #e6e6e6;
    display: flex;
    .item {
     width: 16.66666666%;
     height: 2.31111111rem;
     border-right: 1px solid #b9b9b9;
     line-height: 2.31111111rem;
     text-align: center;
     &:last-child {
      border-right: none;
     }
     .icon_dot {
      display: inline-block;
      width: 0.51111111rem;
      height: 0.51111111rem;
      background: url("../../assets/images/icon_dot.png") no-repeat;
      background-size: cover;
     }
    }
   }
   .pay-tool-link {
    padding: 0.53333333rem 0.8rem 0;
    text-align: right;
    .link {
     font-size: 0.66666666rem;
     color: #3c8cfb;
    }
   }
  }
  .pay-tool-keyboard {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
     width: 33.3333%;
     height: 2.25442834rem;
     line-height: 2.25442834rem;
     text-align: center;
     border-right: 1px solid #aeaeae;
     border-bottom: 1px solid #aeaeae;
     font-size: 0.8rem;
     font-weight: bold;
     &:nth-child(1), &:nth-child(2), &:nth-child(3) {
      border-top: 1px solid #eee;
     }
     &:nth-child(3), &:nth-child(6), &:nth-child(9), &:nth-child(12) {
      border-right: none;
     }
     &:nth-child(10), &:nth-child(11), &:nth-child(12) {
      border-bottom: none;
     }
     &:nth-child(10), &:nth-child(12), &:active {
      background-color: #d1d4dd;
     }
     &:nth-child(12):active {
      background-color: #fff;
     }
    }
   }
  }
 }

注意：页面使用rem布局，根html的font-size为45px。

看完了这篇文章，相信你对“vue如何实现键盘输入支付密码功能”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！