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

wuliyuye

虚拟数字键盘，支持数字随机，支持自定义输出数字内容的长度，自定义是否支持双向绑定，支持二次输入操作。可以为密码、验证码输入时使用。
组件文件
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.                 },
    
24.                 data() {
    
25.                         return{
    
26.                                 isShowNUmberBoard:false,
    
27.                                 number:'',
    
28.                                 arrNumber:[],
    
29.                                 limit:6,
    
30.                                 isRandom:false,
    
31.                                 isModel:false  //是否支持双向绑定
    
32.                         }       
    
33.                 },
    
34.                 methods: {
    
35.                         closeNumberBoard(e){
    
36.                                 this.data.isShowNUmberBoard = false;
    
37.                         },
    
38.                         openNumberBoard(e){
    
39.                                 this.data.isShowNUmberBoard = true;
    
40.                         },
    
41.                         getNumber(e){
    
42.                                 // console.log(JSON.stringify(e));
    
43.                                 this.data.arrNumber = e.detail;
    
44.                                 this.data.number = e.detail.join('');
    
45.                         },
    
46.                         deleteNumber(e){
    
47.                                 api.toast({
    
48.                                         msg:'点击回退、删除键'
    
49.                                 })
    
50.                                 //可根据需要处理显示的内容
    
51.                                 this.data.number='';
    
52.                         }
    
53.                 }
    
54.         }
    
55. </script>
    
56. <style>
    
57.         .page {
    
58.                 height: 100%;
    
59.                 background-color: #ffffff;
    
60.         }
    
61.         .number-box{
    
62.                 font-size: 20px;
    
63.         }
    
64. </style>

复制代码

关于随机数字键盘的原理是运用了数组的sort排序。
sort() 方法，有一个可选参数，必须是函数，供它调用。那么就是个回调函数咯！