vue引入js数字小键盘的实现代码

效果如图：

代码如下：

  keyboard.vue

 
 
 
keyboard { 
  display: inline-block; 
 width: 263px; 
 font-size: 18px; 
 border-radius: 2px; 
 background-color: #e5e6e8; 
 user-select: none; 
 bottom: 0; 
 position: absolute; 
 left: -20px; 
 top: 77px; 
 z-index: 999; 
 pointer-events: auto; 
 p { 
  width: 100%; 
  margin: 0 auto; 
  height: 42px; 
  margin-bottom: 0.5em; 
  display: flex; 
  display: -webkit-box; 
  flex-direction: row; 
  flex-wrap: nowrap; 
  justify-content: center; 
  i { 
   display: block; 
   margin: 0 0.2%; 
   height: 50px; 
   line-height: 52px; 
   font-style: normal; 
   font-size: 24px; 
   border-radius: 3px; 
   width: 44px; 
   background-color: #fff; 
   text-align: center; 
   flex-grow: 1; 
   flex-shrink: 1; 
   flex-basis: 0; 
   -webkit-box-flex: 1; 
   &:active { 
    background-color: darken(#ccc, 10%); 
   } 
  } 
  .tab-top { 
   width: 50px; 
   margin: 0 1%; 
   background: #cccdd0; 
   color: #fff; 
   font-size: 24px; 
  } 
  .key-delete { 
   width: 47px; 
   margin: 0 0.2%; 
   color: #827f7f; 
   background: ; 
  } 
  .tab-num { 
   font-size: 18px; 
   background: #dedede; 
   color: #5a5959; 
  } 
  .tab-point { 
   width: 20px; 
  } 
  .tab-blank { 
   width: 50px; 
   font-size: 12px; 
   padding: 0 15px; 
   color: #5a5959; 
   line-height: 60px; 
  } 
  .tab-symbol { 
   width: 20px; 
   font-size: 18px; 
  } 
  .tab-enter { 
   font-size: 30px; 
   line-height: 54px; 
  } 
  &:nth-child(2) { 
   width: 100%; 
  } 
 } 
} 
 

在使用页面引入代码：

html代码

引入数字小键盘vue

注册引入的主键

定义的method

总结

以上所述是小编给大家介绍的vue引入js数字小键盘的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！