关于avm.js:YonBuilder移动开发平台-AVM框架-封装虚拟数字键盘组件
AVM（Application-View-Model）前端组件化开发模式基于规范Web Components组件化思维，提供蕴含虚构DOM和Runtime的编程框架avm.js以及多端对立编译工具，齐全兼容Web Components规范，同时兼容Vue和React语法糖编写代码，编译工具将Vue和React相干语法糖编译转换为avm.js代码。 基于规范 Web Components 组件化思维，兼容 Vue / React 语法个性，通过一次编码，别离编译为 App、小程序代码，实现多端开发。 组件性能介绍虚构数字键盘，反对数字随机，反对自定义输入数字内容的长度，自定义是否反对双向绑定，反对二次输出操作。能够为明码、验证码输出时应用。 示例展现 组件开发组件文件 number-keyboard.stml<template><view class="number-keyboard_container"> <view class="number-keyboard_box"> <view class="number-keyboard_box-item-container"> <view class="number-keyboard_box-item" v-for="item in numbers"> <view class="number-keyboard_box-item-label" data-key={item} @click="getNumber"> <text style="font-size:28px;">{item}</text> </view> </view> <view class="number-keyboard_box-item"> <view class="number-keyboard_box-item-label" @click="closeBoard"> <image class="number-keyboard_box-item-ico" src={closeBase64} mode="widthFix"></image> </view> </view> <view class="number-keyboard_box-item"> <view class="number-keyboard_box-item-label" data-key='0' @click="getNumber"> <text style="font-size:28px;">0</text> </view> </view> <view class="number-keyboard_box-item"> <view class="number-keyboard_box-item-label" @click="delNumber"> <image class="number-keyboard_box-item-ico" src={backBase64} mode="widthFix"></image> </view> </view> </view> </view></view></template><script>export default { name: 'number-keyboard', props:{ limitLengh:Number, recnetNumber:Array, isRandom:Boolean, isModel:Boolean }, installed(){ if(this.props.isRandom){ this.data.numbers.sort(this.randomsort); } if(this.props.isModel){ this.data.resultNumber=this.props.recnetNumber; this.data.numberIndex = this.props.recnetNumber.length; } }, data() { return{ numbers:['1','2','3','4','5','6','7','8','9'], resultNumber:[], numberIndex:0, 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=', 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' } }, methods: { randomsort(a,b){ return Math.random()>0.5 ? -1 : 1;//用Math.random()函数生成0~1之间的随机数与0.5比拟，返回-1或1 }, closeBoard(e){ this.fire('close',''); }, getNumber(e){ if(this.props.isModel){ if(this.data.numberIndex<this.props.limitLengh){ this.data.resultNumber[this.data.numberIndex] = e.currentTarget.dataset.key;//兼容IOS和安卓 this.data.numberIndex += 1; this.fire('setNumber',this.data.resultNumber); } } else{ this.fire('setNumber',[e.currentTarget.dataset.key]); } }, delNumber(e){ if(this.props.isModel){ this.data.numberIndex -= 1; if(this.data.numberIndex>=0){ this.data.resultNumber.splice(this.data.numberIndex,1); this.fire('setNumber',this.data.resultNumber); } } else{ this.fire('delNumber',''); } } }}</script><style>.number-keyboard_container { position: absolute; height: 100%; width: 100%; background-color: rgba(0,0,0,0);}.number-keyboard_box{ align-items: center; position: absolute; bottom: 0; width: 100%; background-color: #cccccc;}.number-keyboard_box-item-container{ flex-flow: row wrap; justify-content: space-around; align-items: center; padding: 10px;}.number-keyboard_box-item{ flex-basis: 33%; box-sizing: border-box; padding: 5px;}.number-keyboard_box-item-label{ display: flex; background-color: #ffffff; padding: 5px; border-radius: 5px; width: 100%; height: 48px; align-items: center; justify-content: center;}.number-keyboard_box-item-ico{ width: 60px;}</style>组件应用阐明本组件是基于AVM.js开发的多端组件，通常同时适配Android、iOS、小程序、H5 , 具体反对状况还要看每个组件的阐明文档。 ...