APICloud AVM框架 密码输入框组件

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

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

组件功能介绍

带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与数字键盘组件配合使用。

支持自定义密码长度，支持加密和明文显示。 

组件示例

组件开发

组件文件

password-input.stml

<template>
	<view class="password-input_container">
		<view class="password-input_security">
			<view class="password-input_item" v-for="(item,index) in codeArr" data-index={index} @click="codeInput">
				<text class="password-input_item-word--hidden" v-if="this.props.passwordCode[index] && !this.props.mask"></text>
				<text class="password-input_item-word--mask" v-if="this.props.passwordCode[index] && this.props.mask">{this.props.passwordCode[index]}</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'password-input',
		props:{
			length:Number,
			passwordCode:Array,
			mask:Boolean
		},
		install(){
			for (let index = 0; index < this.props.length; index++) {
				this.data.codeArr[index]=null;		
			}
		},
		data() {
			return{
				codeArr:[]
			}
		},
		methods: {
			codeInput(e){
				this.fire('codeClick','');
			}
		}
	}
</script>
<style>
	.password-input_container {
		margin: 10px;
	}
	.password-input_security{
		flex-flow: row nowrap;
		height: 50px;
	}
	.password-input_item{
		display: flex;
		align-items: center;
		flex: 1;
		background-color: #fff;
		height: 100%;
		border: 0.5px solid #eee;
		margin: -0.5px;
		justify-content: center;
	}
	.password-input_item-word--hidden{
		width: 10px;
		height: 10px;
		background-color: #000;
		border-radius: 100%;
	}
	.password-input_item-word--mask{
		font-size: 30px;
		text-align: center;
	}
</style>

组件使用说明

本组件是基于AVM.js开发的多端组件，通常同时适配Android、iOS、小程序、H5 , 具体支持情况还要看每个组件的说明文档。

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

 

找到对应模块点击进入。 

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

 

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

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

 

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

 

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

示例文件

demo-password-input.stml

<template>
	<view class="page">
		<safe-area></safe-area>
		<text class="title">请输入6位数密码</text>
		<password-input
			:length={codeLength}
			:passwordCode={passwordCode}
			:mask={isMask}
			oncodeClick="openKeyBoard">
		</password-input>
		<button class="btn">确定</button>
		<number-keyboard
			:limitLengh="codeLength"
			:recnetNumber="passwordCode"			
			:isRandom="isRandom"
			:isModel="isModel"
			onclose="closeNumberBoard" 
			onsetNumber="getNumber" 
			ondelNumber="deleteNumber"
			v-if="isShowNUmberBoard">
		 </number-keyboard>
	</view>
</template>
<script>
	import '../../components/password-input.stml'
	import '../../components/number-keyboard.stml'
	export default {
		name: 'demo-password-input',
		apiready(){
			
		},
		data() {
			return{
				codeLength:6,
				passwordCode:[],
				isRandom:true,
				isShowNUmberBoard:false,
				isModel:true,
				isMask:false,
				passwordCodeStr:'',
			}
		},
		methods: {
			closeNumberBoard(e){
				this.data.isShowNUmberBoard = false;
			},
			getNumber(e){
				// console.log(JSON.stringify(e));
				this.data.passwordCode = e.detail;
				this.data.passwordCodeStr = this.data.passwordCode.join('');
				if(this.data.passwordCode.length==this.data.codeLength){
					this.data.isShowNUmberBoard = false;
				}
			},
			deleteNumber(e){
				this.data.passwordCode = e.detail;
				this.data.passwordCodeStr = this.data.passwordCode.join('');
			},
			openKeyBoard(e){
				this.data.isShowNUmberBoard = true;
			}
		}
	}
</script>
<style>
	.page {
		height: 100%;
		background-color: #f0f0f0;
	}
	.title{
		text-align: center;
		font-size: 20px;
		padding: 20px 0;
	}
	.btn{
		margin: 10px;
		background-color: #ff0000;
		color: #ffffff;
		border-radius: 10px;
		font-size: 20px;
	}
</style>

如果在AVM组件库中，没有找到实际项目中需要的组件，可以自己尝试封装组件。

这是组件化开发的在线文档地址