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