请选择 进入手机版 | 继续访问电脑版

AVM框架 封装虚拟数字键盘组件

技术博客 2022-11-24 18:12 23人浏览 0人回复
原作者: wuliyuye 收藏 邀请
摘要

虚拟数字键盘,支持数字随机,支持自定义输出数字内容的长度,自定义是否支持双向绑定,支持二次输入操作。可以为密码、验证码输入时使用。 组件文件 number-keyboard.stml template view class=number-keyboard ...

虚拟数字键盘,支持数字随机,支持自定义输出数字内容的长度,自定义是否支持双向绑定,支持二次输入操作。可以为密码、验证码输入时使用。
组件文件
number-keyboard.stml
  1. <template>
  2.         <view class="number-keyboard_container">
  3.                 <view class="number-keyboard_box">
  4.                         <view class="number-keyboard_box-item-container">
  5.                                 <view class="number-keyboard_box-item" v-for="item in numbers">
  6.                                         <view class="number-keyboard_box-item-label" data-key={item} @click="getNumber">
  7.                                                 <text style="font-size:28px;">{item}</text>
  8.                                         </view>                                       
  9.                                 </view>
  10.                                 <view class="number-keyboard_box-item">                               
  11.                                         <view class="number-keyboard_box-item-label" @click="closeBoard">
  12.                                                 <image class="number-keyboard_box-item-ico" src={closeBase64} mode="widthFix"></image>
  13.                                         </view>       
  14.                                 </view>
  15.                                 <view class="number-keyboard_box-item">
  16.                                         <view class="number-keyboard_box-item-label" data-key='0' @click="getNumber">
  17.                                                 <text style="font-size:28px;">0</text>
  18.                                         </view>                                       
  19.                                 </view>       
  20.                                 <view class="number-keyboard_box-item">                       
  21.                                         <view class="number-keyboard_box-item-label" @click="delNumber">
  22.                                                 <image class="number-keyboard_box-item-ico" src={backBase64} mode="widthFix"></image>
  23.                                         </view>               
  24.                                 </view>                                       
  25.                         </view>       
  26.                 </view>
  27.         </view>
  28. </template>
  29. <script>
  30.         export default {
  31.                 name: 'number-keyboard',
  32.                 props:{
  33.                         limitLengh:Number,
  34.                         recnetNumber:Array,
  35.                         isRandom:Boolean,
  36.                         isModel:Boolean
  37.                 },
  38.                 installed(){
  39.                         if(this.props.isRandom){
  40.                                 this.data.numbers.sort(this.randomsort);
  41.                         }
  42.                         if(this.props.isModel){
  43.                                 this.data.resultNumber=this.props.recnetNumber;
  44.                                 this.data.numberIndex = this.props.recnetNumber.length;
  45.                         }                       
  46.                 },
  47.                 data() {
  48.                         return{
  49.                                 numbers:['1','2','3','4','5','6','7','8','9'],
  50.                                 resultNumber:[],
  51.                                 numberIndex:0,
  52.                                 closeBase64:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAtCAYAAAA5reyyAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAC4jAAAuIwF4pT92AAADLElEQVRo3u2Zz0tVQRTHP/lMreiXEEREPKIg29gmSJIQWgYVoQhtSqJalv0D0SKQdq0KClpXUNaupE0JZoZWZhL9cNNvkS5mlpbaYs7tnZ7vao83b+67Mh+43PO+9zh35jhnftwBj8fj8Xg8Hg+wHfgAzJTo1QWsjztIc9FfAkGa7+q22eBFlgM4AVQAAXBDKlxm+R35Mi3tPACsAqaA8pjrFMkoJmh9cVckB31St1GbhdruHdNyr3ARkTwJ6zRdUClZuOjKm4GDYt8CnojdBGzF9Ijz0rB1wFF53o8ZBgDqgd1iXwbeY/75J4AVwAvgujzfBuwT+x7Q6aCN1ggwaTKgtCYyA/gppfcovUq0BqU9Vr5tSm8QrUppPcq3VekXlD4gWmCzwS4G+F8R9o8cvjq9JpU9EeGTq6yvyv5S7Ma5SOFHwHFgMXBX6aeBWsy6MQzQIHAMqMSkZcg1YFj8BkWbAJoxaf/UQTucEDA7hV1zmEwKn1F6YlPYNR9dvsxFCm8AGjFj1wxmUVsG3ASGxKcZ2Ai8Ba6KtgnYL3Y78Fr5poEx4AowjlmitGCGiTqXAbRNwOwUbiT3luqI8hkWbURpLcq3RekjSk+LVh3xjrPq7xKbwt//Q/8s908Rz7WtfX7LfUou5+1zkcIPgJ1i6xTuVz7NwFoygQToAHaJ/TzLdw0mqKH/N2AHZm0YBrKCTNonhoD4Z+EoEpvCCxqXs3AKuAM8E30PUEPusSsfyoBXwG35XQ0cwszI94GHDtpojYC5Z2G9F+6mOB9Ja5V+UemJTeFxZY8pe9jiO3RZer8dFLtxLlK4E/M5qpx/e+ZJ4Bzws8DyqzD76ZAhzIy8FHjpoH1WCfCzcEGk5D5ZUCnFIaxTqqBSsrCdwkvkngYuUVqHSmn5XYrHDX/pIP5jy/mu3riDNBfVmLVX3EGKut5gzmGsYftcOKQOWEn+i+Qp4B3RJ2erMWe7+ZLC7J27yHyAsEKxAlgINZiPBDNZ+nLMGUehy54FTSVmSxaVgvVxVzAp9DI7eHvjrlSSWIY52wiD1xp3hZLIFkzw2uOuSJKpw/RGj8fj8XgWHn8A4dKLb2WSDzAAAAAASUVORK5CYII=',
  53.                                 backBase64:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAtCAYAAAA5reyyAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAC4jAAAuIwF4pT92AAAC/UlEQVRo3u2aO2gUURSGv1k1PlFXUHwUQZEYlUACPiM2KbQSKxEkBEtbHyDxAWqjoK2gqIjYWJpC0gQLQUWjoBJUtBOMiWJMwJiYiGtxdtlzx1lndr07w4X7wcBm59xzcv655752wOPxeDwej8dJggxjtwGHgHagsQ7+fwHvgJvA1QzzrAv7gUKK12NgQdZJ22J3yuKVruf1SCbtEu4Cbqm/nyEl9hKYBGZYivMbyCMP66j6/gxwNuWcrXEMs0fcSynuKRXzY9Yi1EoHpnivUoydRyaUAvApayFqYQtSUiXxPgPLUoyfA0aKsYeyFqNaOjHFewisSNCuHRm7ZiaM0wQcB1ZH3JsNfMXBHniAv5cSSQgo95gBYH6M/XJggso9bI7y54yAzZjijZB8xg+AMZKNlw3Aa2U7HGHjnIAbgO8qqTFgY5U+9mI+gNsRNguBF5jirYuwc0rAFsozXqkEV9boaxvmg3iAjGcArcCguvcIWFLBj1MCvlVJvQHm/qe/9cC48nkf2E55zCsAH2J8OCPgVsyyW2PJbwuVt2fjwNqY9s4IeBpzuWKTDmSM0+L1A6sStK2rgDmLvvLq86Dl/7MfGVs1ozi8NYuik3Lv+GbR7yxErKgSfkL8AYQzJbwolNxFCz4D4KnyOQQcDsXpjfHhjIAAR7AnYiNSuiVf75FZGWSXM63u3fiHH6cEBBFNi3i3Bh9NmLuRAWBeyKYNmMKcuKLK2TkBAS5hininyvYDqu0UsuuIohX4qWz7ImycFBDkwFSL2F1F21KbaWBzjG34rDGMswICXA4ldyVhuz2I4M0J7XcBJ4GdEfecFhDgPKaIPSnHD4AvOHqgWiI8Jl5LMXYD8oOV0wKCrNe0iCdSitulYjpZwppwOfcCO5BeEiDLEBtXDlgMHMRc6ly3nVAWr3acQw4eNMPFRG3tzQuIgPpthB/I4cNoBjlb5wLpvpUwAWyqRyK23gSolj7kxGYpUgUB0gNtXpPFGD3APuS3E4/H4/F4PB6Pxwp/AGH7f53PGS6/AAAAAElFTkSuQmCC'
  54.                         }
  55.                 },
  56.                 methods: {
  57.                         randomsort(a,b){
  58.                                 return Math.random()>0.5 ? -1 : 1;//用Math.random()函数生成0~1之间的随机数与0.5比较,返回-1或1
  59.                         },
  60.                         closeBoard(e){
  61.                                 this.fire('close','');
  62.                         },
  63.                         getNumber(e){
  64.                                 if(this.props.isModel){
  65.                                         if(this.data.numberIndex<this.props.limitLengh){
  66.                                                 this.data.resultNumber[this.data.numberIndex] = e.currentTarget.dataset.key;//兼容IOS和安卓
  67.                                                 this.data.numberIndex += 1;
  68.                                                 this.fire('setNumber',this.data.resultNumber);
  69.                                         }
  70.                                 }
  71.                                 else{
  72.                                         this.fire('setNumber',[e.currentTarget.dataset.key]);
  73.                                 }
  74.                                
  75.                         },
  76.                         delNumber(e){
  77.                                 if(this.props.isModel){
  78.                                         this.data.numberIndex -= 1;       
  79.                                         if(this.data.numberIndex>=0){
  80.                                                 this.data.resultNumber.splice(this.data.numberIndex,1);
  81.                                                 this.fire('setNumber',this.data.resultNumber);
  82.                                         }
  83.                                 }
  84.                                 else{
  85.                                         this.fire('delNumber','');
  86.                                 }                                                       
  87.                         }
  88.                 }
  89.         }
  90. </script>
  91. <style>
  92.         .number-keyboard_container {
  93.                 position: absolute;
  94.                 height: 100%;
  95.                 width: 100%;
  96.                 background-color: rgba(0,0,0,0);
  97.         }
  98.         .number-keyboard_box{
  99.                 align-items: center;
  100.                 position: absolute;
  101.                 bottom: 0;
  102.                 width: 100%;
  103.                 background-color: #cccccc;
  104.         }
  105.         .number-keyboard_box-item-container{
  106.                 flex-flow:  row wrap;
  107.                 justify-content: space-around;
  108.                 align-items: center;
  109.                 padding: 10px;
  110.         }
  111.         .number-keyboard_box-item{
  112.                 flex-basis: 33%;
  113.             box-sizing: border-box;
  114.                 padding: 5px;
  115.         }
  116.         .number-keyboard_box-item-label{
  117.                 display: flex;
  118.                 background-color: #ffffff;
  119.                 padding: 5px;
  120.                 border-radius: 5px;
  121.                 width: 100%;
  122.                 height: 48px;
  123.                 align-items: center;
  124.                 justify-content: center;
  125.         }
  126.         .number-keyboard_box-item-ico{
  127.                 width: 60px;
  128.         }
  129. </style>
复制代码
组件使用
demo-number-keyboard.stml
  1. <template>
  2.         <view class="page">
  3.                 <safe-area></safe-area>
  4.                 <text class="number-box" @click="openNumberBoard">{isModel?'支持':'不支持'}双向绑定:{number}</text>
  5.                 <number-keyboard
  6.                         :limitLengh="limit"
  7.                         :recnetNumber="arrNumber"
  8.                         :isRandom="isRandom"
  9.                         :isModel="isModel"
  10.                         onclose="closeNumberBoard"
  11.                         onsetNumber="getNumber"
  12.                         ondelNumber="deleteNumber"
  13.                         v-if="isShowNUmberBoard">
  14.                  </number-keyboard>
  15.         </view>
  16. </template>
  17. <script>
  18.         import '../../components/number-keyboard.stml'
  19.         export default {
  20.                 name: 'demo-random-number-keyboard',
  21.                 apiready(){//like created

  22.                 },
  23.                 data() {
  24.                         return{
  25.                                 isShowNUmberBoard:false,
  26.                                 number:'',
  27.                                 arrNumber:[],
  28.                                 limit:6,
  29.                                 isRandom:false,
  30.                                 isModel:false  //是否支持双向绑定
  31.                         }       
  32.                 },
  33.                 methods: {
  34.                         closeNumberBoard(e){
  35.                                 this.data.isShowNUmberBoard = false;
  36.                         },
  37.                         openNumberBoard(e){
  38.                                 this.data.isShowNUmberBoard = true;
  39.                         },
  40.                         getNumber(e){
  41.                                 // console.log(JSON.stringify(e));
  42.                                 this.data.arrNumber = e.detail;
  43.                                 this.data.number = e.detail.join('');
  44.                         },
  45.                         deleteNumber(e){
  46.                                 api.toast({
  47.                                         msg:'点击回退、删除键'
  48.                                 })
  49.                                 //可根据需要处理显示的内容
  50.                                 this.data.number='';
  51.                         }
  52.                 }
  53.         }
  54. </script>
  55. <style>
  56.         .page {
  57.                 height: 100%;
  58.                 background-color: #ffffff;
  59.         }
  60.         .number-box{
  61.                 font-size: 20px;
  62.         }
  63. </style>
复制代码
关于随机数字键盘的原理是运用了数组的sort排序。
sort() 方法,有一个可选参数,必须是函数,供它调用。那么就是个回调函数咯!
微信图片_20220601173211.jpg
微信图片_20220601173217.jpg
本文暂无评论,快来抢沙发!