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