vant weapp小程序端控件目前是没有PasswordInput,NumberKeyboard的。实现效果:

数字键盘组件代码(keyboard.wpy):

<template>
<div class="keyboard">
<div class="number-keyboard number-keyboard--default number-keyboard--safe-area-inset-bottom">
<div class="number-keyboard__body">
<i v-for="(item,index) of keys" :key="index" @click="keyTap(item)" class="hairline key" :class="{'key--gray':item.moreClass}">{{item.txt}}</i>
</div>
</div>
</div>
</template> <script>
import wepy from '@wepy/core';
wepy.component({
data: {
keys: [
{ txt: 1, key: 1},
{ txt: 2, key: 2},
{ txt: 3, key: 3},
{ txt: 4, key: 4},
{ txt: 5, key: 5},
{ txt: 6, key: 6},
{ txt: 7, key: 7},
{ txt: 8, key: 8},
{ txt: 9, key: 9},
{ txt: '', key: '', moreClass: 'key--gray key--extra' },
{ txt: 0, key: 0},
{ txt: '删除', key: 'del', moreClass: 'key--gray key--delete' }
]
}, methods: {
keyTap(item){
if(item.key=='del'){
this.$emit('del',item);
}else if(/\d/.test(item.key)){
this.$emit('keyinput',item);
}
}
}, created() {}
});
</script>
<style lang="less" scoped>
.keyboard {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
}
.number-keyboard__body {
position: relative;
box-sizing: border-box;
.key {
display: inline-block;
width: 33.33333333%;
height: 100rpx;
font-size: 40rpx;
font-style: normal;
line-height: 100rpx;
text-align: center;
vertical-align: middle;
// cursor: pointer;
position: relative;
// color:#777;
outline: none;
&.key--gray {
background-color: #ebedf0;
font-size: 30rpx;
}
&.key--active {
background-color: #f2f3f5;
}
}
.key::after {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: 0 solid #ebedf0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
border-width: 0.02667rem 0.02667rem 0 0;
}
}
</style>

  密码提示框组件代码(pswInput.wpy):

<template>
<div class="inputRow">
<div class="pwdItem" v-for="(item,index) of length" :key="index" :class="{'active':index==arrPsw.length}">
<text class="txt">{{arrPsw[index]||""}}</text>
<div class="pcursor" v-if="index==arrPsw.length"></div>
</div>
</div>
</template> <script>
import wepy from '@wepy/core';
wepy.component({
data: {
arrPsw: []
},
props: {
length: Number,
val: String
},
methods: {}, created() {},
computed: {
arrPsw() {
return (this.val && this.val.length && this.val.split('')) || [];
}
}
});
</script>
<style lang="less" scoped>
@keyframes cflicker {
0%{
opacity: 0;
height: 38%;
}
100%{
opacity: 1;
height: 40%;
} }
.inputRow {
display: flex;
justify-content: space-between;
padding: 22rpx 46rpx 0 46rpx;
.pwdItem {
width: 76rpx;
height: 76rpx;
line-height: 66rpx;
border-bottom: 4rpx solid #acabab;
position: relative;
&.active {
border-bottom: 4rpx solid #3ddbc7;
}
.txt {
font-size: 68rpx;
color: #4b5161;
vertical-align: top;
}
.pcursor {
position: absolute;
top: 50%;
left: 50%;
width: 2rpx;
height: 40%;
background-color: #323233;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
animation: 1s cflicker infinite ease-in-out;
}
}
}
</style>

  父组件调用:

<template>
<div class="register-sms">
<div class="header-tip">短信验证码发送至150****8991</div>
<p class="input-title">请输入验证码</p>
<div class="pswInput">
<pswInput length="{{6}}" :val="params.smsCode"></pswInput>
</div>
<p class="regTip re-send" v-if="!codeLoading">
<span @click="sendSMS">重新发送</span>
</p>
<p class="regTip timeNum" v-if="codeLoading">{{codeTime}}S</p> <keyboard @keyinput="onKeysInput" @del="onKeysDel"></keyboard>
</div>
</template> <script>
import wepy from '@wepy/core';
wepy.page({
data: {
params: {
smsCode: '',
},
codeLoading: false, //验证码倒计时显示
codeTime: 60, //验证码倒计时
time1: null //清除定时器
}, methods: {
onKeysInput(item){
if(this.params.smsCode.length>5) return false;
this.params.smsCode = this.params.smsCode + item.key;
console.log(this.params.smsCode);
if(this.params.smsCode.length===6){
this.register();
}
},
register(){
console.log("register",this.params)
},
onKeysDel(item){
let temp = this.params.smsCode.split('')||[];
temp.pop();
this.params.smsCode = temp.join("");
}
}, created() {}
});
</script>
<config>
{
navigationBarTitleText: '验证码密码框',
usingComponents: {
"pswInput":"../components/pswInput",
"keyboard":"../components/keyboard",
}
}
</config>
<style scoped lang="less">
input::-webkit-input-placeholder {
color: #c2c2c2;
}
.register-sms {
text-align: center;
padding-top: 30px;
}
.header-tip {
font-size: 28rpx;
text-align: left;
margin-left: 48rpx;
color: #969798;
}
.input-title {
font-size: 28rpx;
color: #666;
margin-top: 96rpx;
margin-left: 44rpx;
margin-bottom: 10rpx;
text-align: left;
}
.van-password-input__security {
.li {
border-bottom: 4rpx solid #acbbab;
color: #4b5161;
font-size: 68rpx;
}
}
.regTip {
font-size: 28rpx;
text-align: right;
margin-top: 60rpx;
margin-right: 40rpx;
&.re-send {
color: #32d9c3;
}
&.timeNum {
color: #969798;
}
}
.pswInput { }
</style>

  

小程序wepy2 模拟vant PasswordInput, NumberKeyboard 密码输入框控件的更多相关文章

  1. 微信小程序实战:表单与选择控件的结合

    先上代码. login.wxml <mp-toptips msg="{{error}}" type="error" show="{{error} ...

  2. 微信小程序搭建mpvue+vant+flyio

    导语 上一篇文章微信小程序搭建mpvue+vant已经介绍了如何搭起mpvue项目及引入vant,本篇文章继续在它的基础上,引入flyio,并做一些封装,目的是为了在小程序发起请求. 这时读者会有些疑 ...

  3. 微信小程序搭建mpvue+vant

    第一步:查看是否已经装了node.js $ node -v $ npm -v   正确姿势 没有装的话前往Node.js官网安装 第二步:安装cnpm $ npm install -g cnpm -- ...

  4. delphi 一个自动控制机的硅控板检测程序,用多线程和API,没有用控件,少做改动就能用 用485开发

    一个自动控制机的硅控板检测程序,用多线程和API,没有用控件,少做改动就能用Unit CommThread; Interface Uses  Windows, Classes, SysUtils, G ...

  5. SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)

    做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...

  6. WPF 从程序集中检索图片资源stream给Image控件使用

    原文:WPF 从程序集中检索图片资源stream给Image控件使用 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/nihang1234/artic ...

  7. WPF 程序如何跨窗口/跨进程设置控件焦点

    原文:WPF 程序如何跨窗口/跨进程设置控件焦点 WPF 程序提供了 Focus 方法和 TraversalRequest 来在 WPF 焦点范围内转移焦点.但如果 WPF 窗口中嵌入了其他框架的 U ...

  8. 【小程序】模拟数据支持(mockjs配置模拟服务器接口数据)

    utils目录 ①下载mockjs(地址)放置utils目录中 ②新建api.js :配置模拟数据以及后台接口,通过DEBUG=ture;  //切换数据接口 配置如下: let API_HOST = ...

  9. wepy-cli 开发小程序如何使用vant组件

    同样使用wepy-cli快速生成的小程序,目前可以使用组件: 直接通过 git 下载 Vant Weapp 源代码,并将dist目录拷贝到自己的项目中 git clone https://github ...

随机推荐

  1. 将本地项目提交到coding上托管

    1:   注册coding并新建项目test2:在终端 cd 到要提交的项目  使用git init创建.git文件夹3:使用git pull  <项目地址>https的那个4:git a ...

  2. Stack Overflow: The Architecture - 2016 Edition

    To get an idea of what all of this stuff “does,” let me start off with an update on the average day ...

  3. Replication的犄角旮旯(六)-- 一个DDL引发的血案(上)(如何近似估算DDL操作进度)

    <Replication的犄角旮旯>系列导读 Replication的犄角旮旯(一)--变更订阅端表名的应用场景 Replication的犄角旮旯(二)--寻找订阅端丢失的记录 Repli ...

  4. 关于http协议的理解

    一.状态码 1.200:请求成功. 2.302:浏览器进行重定向. 3.304:资源已使用,即有缓存. 4.404:请求失败,请求的资源未在服务器上发现. 5.500:服务器端发生错误. 二.php获 ...

  5. [ACM] poj 1064 Cable master (二分查找)

    Cable master Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 21071   Accepted: 4542 Des ...

  6. javaweb学习之Servlet开发(二)

    javaweb学习总结(六)--Servlet开发(二) 一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个< ...

  7. Serializable 作用

    Serializable 作用 序列化的attribute,是为了利用序列化的技术 准备用于序列化的对象必须设置 [System.Serializable] 标签,该标签指示一个类能够序列化. 便于在 ...

  8. valid number 判断字符串是否为有效数字

    RT,面试题,给定一个字符串判断是否为科学计数法的有效数字.此题各种繁琐考虑.今天终于学会了用有限状态机来处理.理解之后简洁易懂.在此分享我的理解推导思路,大有收获啊. 网上有解法说先记录每个状态代表 ...

  9. Java集合类源码解析:AbstractList

    今天学习Java集合类中的一个抽象类,AbstractList. 初识AbstractList AbstractList 是一个抽象类,实现了List<E>接口,是隶属于Java集合框架中 ...

  10. WIN7虚拟桌面创建(多屏幕多桌面)

    Windows7/WIN7虚拟桌面怎么用怎么创建多桌面(摘录) 在使用电脑中经常会遇到桌面软件太多了不够用的感慨,那么要是一台电脑有多个桌面就好了.在windows10中自带已经支持了虚拟桌面,在wi ...