首页 > 其他分享 >APICloud AVM框架 封装虚拟数字键盘组件

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

时间：2022-10-14 14:01:35浏览次数：77  
标签：box APICloud 数字键盘 number AVM numberIndex keyboard 组件 data

AVM（Application-View-Model）前端组件化开发模式基于标准Web Components组件化思想，提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具，完全兼容Web Components标准，同时兼容Vue和React语法糖编写代码，编译工具将Vue和React相关语法糖编译转换为avm.js代码。

基于标准 Web Components 组件化思想，兼容 Vue / React 语法特性，通过一次编码，分别编译为 App、小程序代码，实现多端开发。

组件功能介绍

虚拟数字键盘，支持数字随机，支持自定义输出数字内容的长度，自定义是否支持双向绑定，支持二次输入操作。可以为密码、验证码输入时使用。

示例展示

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

APICloud AVM框架 封装虚拟数字键盘组件_组件化_02

组件开发

组件文件

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 , 具体支持情况还要看每个组件的说明文档。

首先需要登录开发平台，​​http://www.apicloud.com​​。 通过控制平台右上方的模块Store进入，然后选择AVM组件。

APICloud AVM框架 封装虚拟数字键盘组件_双向绑定_03

APICloud AVM框架 封装虚拟数字键盘组件_双向绑定_04

找到对应模块进入

APICloud AVM框架 封装虚拟数字键盘组件_组件化_05


也可通过搜索栏，通过组件名称关键字进行检索。

APICloud AVM框架 封装虚拟数字键盘组件_组件化_06

进入模块详情，点击立即下载下载完整的组件安装包。

APICloud AVM框架 封装虚拟数字键盘组件_双向绑定_07

组件压缩包的文件目录如下

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

也可通过查看模块文档 来了解模块的具体参数，引用的原生模块，注意事项等。 

APICloud AVM框架 封装虚拟数字键盘组件_双向绑定_09

具体在项目中的使用步骤是，第一步将压缩文件中的number-keyboard.stml文件拷贝到项目的components目录，通过阅读readme.md 文档和查看demo示例文件 demo-number-keyboard.stml在需要开发的stml文件中，引入组件文件，完成页面的开发。

关于随机数字键盘的原理是运用了数组的sort排序。

sort() 方法，有一个可选参数，必须是函数，供它调用。那么就是个回调函数咯！

标签：box,APICloud,数字键盘,number,AVM,numberIndex,keyboard,组件,data
From： https://blog.51cto.com/u_9338896/5756430

相关文章

  • APICloud AVM 框架 封装树形分类选择组件 组件递归调用
    由于项目中，需要用到追加表单项目的功能，而表单项目在PC端是树形列表的形式展现，而且要实现多选功能，依上述需求开发了树形分类选择组件。组件开发中用到的知识要点是：组件递归......
  • ElementUI采用递归方式使用导航菜单（NavMenu）报错
    在使用element-ui的导航菜单时，由于可能存在无数个子菜单需采用递归方式生成，在组件中重复调用本组件但会导致鼠标移入时循环调用element内部的某个鼠标事件，引起下拉菜单报......
  • PowerDesigner提示Could not Initialize JavaVM!
    PowerDesigner逆向mysql数据库报CouldnotInitializeJavaVM!提示，是因为powerdesigner基于32位JVM的原因。解决办法：安装32位的JDK或者安装mysql的ODBC驱动（重要提示：务......
  • APICloud可视化编程（二）
    上一期我们为大家讲解低代码在国内市场的当前现状以及APICloud可视化开发工具的组件类型和特点。相信大家对可视化编程有了一个整体的了解，那么今天带大家更进一步的使用组......
  • APICloud可视化编程（二）
    上一期我们为大家讲解低代码在国内市场的当前现状以及APICloud可视化开发工具的组件类型和特点。相信大家对可视化编程有了一个整体的了解，那么今天带大家更进一步的使用组......
  • unity navmesh相关_运行时生成可通过的桥
    运行时候动态的桥面。 方式1：使用navMeshSurface.BuildNavMesh()动态创建https://answers.unity.com/questions/1480956/how-to-generate-nav-mesh-floor-in-a-procedur......
  • 高抗干扰触摸IC：VK3606D有6通道6键触摸检测芯片多键同时按下有效，适用智能开关，温控器，数
    型号：VK3606D ：永嘉微电/VINKA封装形式：SOP16KPP2411概述  VK3606D具有6个触摸按键，可用来检测外部触摸按键上人手的触摸动作。该芯片具有较高的集成度，仅需极少的外部......
  • 自定义loader使用说明，以APICloud平台为例
    一、应用自定义loader的作用一直以来，官方发布的AppLoader，只包含了官方模块。而其他开发者的自定义模块、付费模块、第三方SDK模块等都并未加入到loader中，这给开发者在开发......
  • APICloud AVM框架 封装车牌号输入键盘组件
    AVM（Application-View-Model）前端组件化开发模式基于标准WebComponents组件化思想，提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具，完全兼容WebComponents标......
  • APICloud AVM 封装验证码输入框组件
    AVM（Application-View-Model）前端组件化开发模式基于标准WebComponents组件化思想，提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具，完全兼容WebCom......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99