车牌号输入组件

如图

基于微信小程序组件封装，输出值为当前选择车牌号，可回显车牌号。

支持7位8位车牌号，因为我的项目没有此需求，所以没有测试，具体功能待验证。

话不多说，上代码。

json文件

{"component": true,"usingComponents": {"van-overlay": "@vant/weapp/overlay/index","van-divider": "@vant/weapp/divider/index"}
}

wxs文件

Component({/*** 组件的属性列表*/properties: {// 组件显示keyboardShow: {type: Boolean,value: false},// 初始传入车牌号vehicleNo: {type: String,value: ''},// 车牌号位数plateLimit: {type: Number,value: 7}},/*** 组件的初始数据*/data: {keyboardShow: false, // 整体键盘显示numberIsDis: 1, // 输入键盘不可点击 2可点击fieldBoardShow: true, // 省键盘provincesKeyList: '京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新',numberKeyList: '0123456789',englishKeyOneList: 'ABCDEFGHJKLMNPQRSTUV',englishKeyTwoList: 'WXYZ',currentFocus: 0,currIndex: 0,codeList: [],codeReset: []},/*** 组件的生命周期* ready方法要正确执行需要在父页面中写入当前组件时，wx:if 绑定组件显示属性* 组件隐藏之后要注销，否则ready方法只执行一次*/ready: function() {let temp = []let reset = []let carLen = this.properties.vehicleNo ? this.properties.vehicleNo.length + 1 : 0if (carLen) {let arr = this.properties.vehicleNo.split('')arr.forEach(item => {temp.push({ value: item })reset.push({ value: '' })})// 解决车牌号异常数据导致的样式问题(车牌号位数不够)if (carLen < this.data.plateLimit) {let num = this.data.plateLimit - carLenfor (let index = 0; index <= num; index++) {temp.push({ value: '' })reset.push({ value: '' })}}} else {// 初始化设置数据for (let index = 0; index < this.data.plateLimit; index++) {temp.push({ value: '' })reset.push({ value: '' })}}this.setData({codeList: temp,codeReset: reset,numberIsDis: carLen ? 2 : 1,fieldBoardShow: carLen ? false : true,currentFocus: carLen,currIndex: this.properties.vehicleNo ? this.properties.vehicleNo.length : 0})},/*** 组件的方法列表*/methods: {// 省份键盘provinceKeyClick(e) {const { val } = e.currentTarget.datasetconst { currentFocus, codeList } = this.datalet temp = codeListtemp[0].value = valthis.setData({codeList: temp,fieldBoardShow: false,currIndex: 1,numberIsDis: 1,currentFocus: currentFocus + 1})},//数字键盘不可点击事件numberKeyDisabled(e) {// 获取组件// this.keyboard = this.selectComponent("#keyboard");return},// 数字键盘可点击numberKeyEnabled(e) {const { currIndex, codeList } = this.dataif (currIndex > codeList.length - 1) returnconst { val } = e.currentTarget.datasetlet temp = this.data.codeListtemp[currIndex].value = valthis.setData({codeList: temp,currIndex: currIndex + 1,currentFocus: currIndex + 1})},// 字母键盘点击englishKeyClick(e) {const { currIndex, codeList } = this.dataif (currIndex > codeList.length - 1) returnconst { val } = e.currentTarget.datasetlet temp = this.data.codeListtemp[currIndex].value = valthis.setData({codeList: temp,currentFocus: currIndex + 1,currIndex: currIndex + 1,numberIsDis: 2})},// 退格backspace: function(e) {const { currIndex } = this.datalet temp = this.data.codeListif (!currIndex) returntemp[currIndex - 1].value = ''this.setData({codeList: temp,currentFocus: currIndex - 1,currIndex: currIndex - 1,fieldBoardShow: currIndex === 1,numberIsDis: currIndex === 2 ? 1 : 2})},// 关闭closeKeyBoard: function(e) {const { codeReset } = this.datathis.setData({keyboardShow: false,codeList: codeReset,currentFocus: 0,currIndex: 0,fieldBoardShow: true,numberIsDis: 1})this.triggerEvent('closeKeyBoard')},// 确定confirmKeyBoard: function(e) {const { currIndex, codeList } = this.dataif (currIndex < codeList.length) returnlet plate = ''codeList.map(item => (plate += item.value))this.triggerEvent('keyboardConfirm', plate)this.closeKeyBoard()}}
})

wxml文件

<!--车牌号输入组件-->
<van-overlay show="{{ keyboardShow }}" z-index="9990"><view class="keyBoard_content"><!-- header --><view class="top-part flex"><view class="font-30 close" bindtap="closeKeyBoard">x</view><view class="message color-333">输入车牌号</view><view class="font-30 confirm {{currIndex === codeList.length ? 'confirm-active' : ''}}" bindtap="confirmKeyBoard">确定</view></view><!-- input --><view class="license flex"><view wx:for="{{codeList}}" wx:key="index" class="edit-text {{currentFocus === index ? 'border-active' : ''}} {{index === 2 ? 'space-left' : ''}}"><view>{{item.value}}</view></view></view><!-- 键盘 --><view class="keyboard"><!-- 省份键盘 --><block wx:if="{{fieldBoardShow}}"><view class="province-keyboard flex"><viewclass="td td-nor color-333"wx:for="{{provincesKeyList}}"wx:key="index"wx:for-index="idx"wx:for-item="itemName"catch:tap="provinceKeyClick"data-index="{{idx}}"data-val="{{itemName}}"hover-class="board-active"hover-start-time="0"hover-stay-time="80">{{itemName}}</view></view></block><!--数字键盘--><block wx:if="{{!fieldBoardShow}}"><view class="number-keyboard flex between"><!-- 不可点击 --><block wx:if="{{numberIsDis === 1}}"><viewclass="td td-num color-333 board-active"wx:for="{{numberKeyList}}"wx:key="idx"wx:for-index="idx"wx:for-item="itemName"catch:tap="numberKeyDisabled"data-val="{{itemName}}">{{itemName}}</view></block><!-- 可点击 --><block wx:if="{{numberIsDis === 2}}"><viewclass="td td-num color-333"wx:for="{{numberKeyList}}"wx:key="idx"wx:for-index="idx"wx:for-item="itemName"catch:tap="numberKeyEnabled"data-index="{{idx}}"data-val="{{itemName}}"hover-class="board-active"hover-start-time="0"hover-stay-time="80">{{itemName}}</view></block></view></block><!--字母键盘--><block wx:if="{{!fieldBoardShow}}"><view class="english-keyboard flex between"><viewclass="td td-num color-333"wx:for="{{englishKeyOneList}}"wx:key="idx"wx:for-index="idx"wx:for-item="itemName"data-index="{{idx}}"data-val="{{itemName}}"hover-class="board-active"hover-start-time="0"hover-stay-time="80"catch:tap="englishKeyClick">{{itemName}}</view></view><view class="english-keyboard flex englishtTwo"><viewclass="td td-num color-333"wx:for="{{englishKeyTwoList}}"wx:key="idx"wx:for-index="idx"wx:for-item="itemName"data-index="{{idx}}"data-val="{{itemName}}"hover-class="board-active"hover-start-time="0"hover-stay-time="80"catch:tap="englishKeyClick">{{itemName}}</view></view></block><!--清除按钮--><viewcatch:tap="backspace"class="delete flex"hover-class="board-active"hover-start-time="0"hover-stay-time="80"><image class="deleteImg" src="/images/clear.png" /></view></view></view>
</van-overlay>

wxss文件

@import "../../styles/style.wxss";.keyBoard_content {z-index: 9999;position: fixed;bottom: 0;left: 0;width: 100%;height: auto;background: #fff;
}.top-part {width: 100%;padding: 25rpx 40rpx;height: 92rpx;justify-content: center;align-items: center;box-sizing: border-box;border-bottom: 1rpx solid #EAEAEA;margin-bottom: 15rpx;text-align: center;
}.close {width: 10%;font-size: 47rpx;color: #A0A0A0;
}.message {width: 80%;text-align: center;font-weight: Semibold;
}.confirm {width: 10%;color: #A0A0A0;font-weight: Regular;
}.confirm-active {color: #27B57D;
}.license {box-sizing: border-box;justify-content: space-around;margin: 60rpx 90rpx 50rpx;
}.edit-text {height: 80rpx;line-height: 80rpx;width: 60rpx;border: 1rpx solid #A0A0A0;border-radius: 8rpx;text-align: center;font-size: 36rpx;
}.space-left {margin-left: 30rpx;
}.border-active {border: 1rpx solid #5BCA92;
}.keyboard {width: 100%;height: 450rpx;box-sizing: border-box;position: relative;
}.province-keyboard {margin: 0 50rpx;flex-wrap: wrap;
}.number-keyboard {margin: 0 5rpx;
}.english-keyboard {margin: 0 5rpx;flex-wrap: wrap;
}.englishtTwo {margin-left: 10%;
}.td {font-family: "PingFangSC";font-size: 36rpx;font-weight: Medium;margin: 12rpx 4rpx;border: 1rpx solid #E0E0E0;border-radius: 8rpx;height: 84rpx;line-height: 84rpx;text-align: center;
}.td-nor {flex: 0 1 9%;
}.td-num {flex: 0 1 8%;
}.board-active {box-shadow: 0 0 0 #e5e5e5;background: #e5e5e5;
}.delete {width: 140rpx;height: 84rpx;text-align: center;background-color: #D8D8D8;border-radius: 8rpx;position: absolute;right: 80rpx;bottom: 30rpx;justify-content: center;align-items: center;
}.deleteImg {width: 44rpx;height: 30rpx;
}

style.wxss 文件

.van-dialog__header {padding-bottom: 20rpx;
}.flex {display: flex;
}.between {justify-content: space-between;
}.font-30 {font-size: 30rpx;
}.color-333 {color: #333333;
}

密码支付键盘组件

交互样式如上图

上代码:

json文件

{"component": true,"usingComponents": {"van-popup": "@vant/weapp/popup/index","van-tab": "/miniprogram_npm/@vant/weapp/tab/index"}
}

wxs文件

import { throttle } from '../../utils/throttle'
const passwordInputData = ['', '', '', '', '', '']
Component({/*** 组件的属性列表*/properties: {// 显示隐藏弹窗passWordShow: {type: Boolean,observer(value) {if (!value) {this.setData({passwordInput: JSON.parse(JSON.stringify(passwordInputData)),passwordIndex: -1})}}},// 支付金额payAmount: {type: Number}},/*** 组件的初始数据*/data: {passwordInput: JSON.parse(JSON.stringify(passwordInputData)),passwordIndex: -1,keyboardNumber: '123456789*0*',password: ''},/*** 启用插槽*/options: {},lifetimes: {attached: function() {}},externalClasses: ['custom-class'],/*** 组件的方法列表*/methods: {// 忘记密码forgetPassWord() {this.onClose()wx.navigateTo({url: `/pages/manage-password/refund-password/index?source=Back`})},//tab切换onTabChange(e) {this.triggerEvent('onTabChange', {currStatus: e.currentTarget.dataset.value})},onClose() {this.setData({passwordInput: JSON.parse(JSON.stringify(passwordInputData)),passWordShow: false})this.triggerEvent('closeFun')},// throttle防抖tapKeyboard: throttle(function(e) {const { val } = e.currentTarget.datasetconst passwordIndex = this.data.passwordIndex + 1if (passwordIndex > 5) {return}this.data.passwordInput[passwordIndex] = valthis.setData({passwordIndex,passwordInput: this.data.passwordInput})if (passwordIndex === 5) {const password = this.data.passwordInput.join('')this.triggerEvent('submitFun', {password: password})this.onClose()}}),tapKeyboardDelete() {const passwordIndex = this.data.passwordIndex - 1if (passwordIndex < -1) {return}this.data.passwordInput[this.data.passwordIndex] = ''this.setData({passwordIndex,passwordInput: this.data.passwordInput})}}
})

// throttle
export function throttle(fn, delay) {let timer = nullreturn function(...args) {clearTimeout(timer)timer = setTimeout(() => fn.apply(this, [...args]), delay)}
}

wxml文件

<van-popupshow="{{ passWordShow }}"closeableclose-icon-position="top-left"position="bottom"close-icon="cross"custom-style="height: 20%"bind:close="onClose"z-index="99"custom-style="height: 914rpx"
><view class="content"><view class="title color-333">请输入退款密码</view><view class="password-box"><view class="password-main"><viewclass="password-item"wx:for="{{passwordInput}}"wx:for-index="boxIndex"wx:key='boxIndex'><view class="star">{{item ? "*" : ''}}</view></view></view><view class="forget" catch:tap="forgetPassWord">忘记密码</view></view><view class="keyboard flex between"><!-- 数字键盘可点击 --><viewclass="td flex color-333"wx:for="{{keyboardNumber}}"wx:key="index"wx:for-index="idx"wx:for-item="itemName"data-index="{{idx}}"data-val="{{itemName}}"hover-class="board_bg"hover-start-time="0"hover-stay-time="80"><viewclass="del_icon flex"wx:if="{{idx === 11}}"catch:tap="tapKeyboardDelete"data-index="{{idx}}"data-val="{{itemName}}"><image class="deleteImg" src="/images/clear.png" /></view><viewclass="keyboard-num flex"wx:if="{{idx !== 9 && idx !== 11}}"catch:tap="tapKeyboard"data-index="{{idx}}"data-val="{{itemName}}">{{itemName}}</view></view></view></view>
</van-popup>

wxss文件

style.wxss文件上面有

@import "../../styles/style.wxss";.title{font-size: 34rpx;font-family: PingFangSC, PingFangSC-Medium;font-weight: Medium;text-align: center;min-height: 136rpx;line-height: 136rpx;border-bottom: 1px solid #eaeaea;
}.van-popup__close-icon--top-left {top: 50rpx!important;
}
.password-box{padding-top: 40rpx;
}
.forget{font-size: 28rpx;text-align: right;color: #0091ff;padding: 12rpx 28rpx 20rpx;
}
.password-main{width: 684rpx;height: 104rpx;border: 1px solid #a1a1a1;border-radius: 3px;display: flex;margin: 0 auto;
}
.password-item{width: 114rpx;border-right: 1px solid #a1a1a1;display: flex;justify-content: center;align-items: center;
}
.password-item:last-child{border: none;
}
.star{font-size: 60rpx;line-height: 108rpx;padding-top: 20rpx;
}.keyboard{width: 100%;height: 490rpx;padding: 40rpx 16rpx 0;box-sizing: border-box;background: #EEEEEE;flex-wrap: wrap;
}.td {flex: 0 1 32%;border-radius: 8rpx;background-color: #fff;font-size: 50rpx;font-weight: Regular;align-items: center;justify-content: center;margin-bottom: 16rpx;height: 96rpx;
}.board_bg {box-shadow: 0 0 0 #e5e5e5;background: #e5e5e5;
}.del_icon {width: 100%;height: 100%;align-items: center;justify-content: center;
}.del_icon .deleteImg {width: 54rpx;height: 34rpx;
}.keyboard-num {width: 100%;height: 100%;justify-content: center;align-items: center;
}

滑块验证组件

使用微信小程序官方文档提供的滑动组件：

movable-area，movable-view。如下：

wxml

<movable-area class="sliding-box"><view class="label" style="z-index: {{isSlidePass? 1 : 2}};"> 请按住滑块，拖到最右边</view><view class="has-slip" style="width:{{isSlidePass ? '100%' : width+'px'}}">{{isSlidePass ? '验证通过':''}}</view><movable-viewx="{{x}}"disabled="{{isSlidePass}}"bind:touchend="touchend"bindchange="slidChange"direction="horizontal"scale="true"class="sliding-area"><view wx:if="{{!isSlidePass}}" class="sliding-block"> >></view><view wx:else class="sliding-block sliding-icon"><van-icon name="checked" color='#29C701' /></view></movable-view>
</movable-area>

import { $https } from '../../libs/http'
import { encryptionDecodeParmas, encryptionParmas } from '../../utils/encrypt'const app = getApp()
Component({/*** 组件的属性列表*/properties: {// 根据具体业务场景需求确实是否需要传递，或者触发父组件事件// isSlidePass: {//   type: Boolean,//   value: false// }},/*** 组件的初始数据*/data: {width: 0,boxWidth: 0,sliderData: {},x: 0,flag: false,isSlidePass: false},ready() {const _that = thisvar obj = wx.createSelectorQuery().in(_that)obj.selectAll('.sliding-box').boundingClientRect()obj.exec(function(rect) {const boxWidth = rect[0][0].width.toFixed(2) - 35_that.setData({ boxWidth: boxWidth })})},/*** 组件的方法列表*/methods: {slidChange(e) {let { isSlidePass, width } = this.dataif (isSlidePass) returnconst { x } = e.detailwidth = +xthis.setData({ width: width })},async touchend(e) {let { isSlidePass, width, boxWidth } = this.data// 滑动成功if (boxWidth <= +width) {// 请求后端接口const res = await $https.get('xxx')const { code, data, msg } = res.dataif (+code !== 1000) {app.tools.Toast(msg)this.setData({ x: 0 })return}// 请求成功更改状态isSlidePass = truethis.setData({ width: width, isSlidePass: isSlidePass })// 触发父组件事件，修改 isSlidePass 的值// if (isSlidePass) this.triggerEvent('slidePass')} else {this.setData({ x: 0 })}}}
})

json

{"component": true,"usingComponents": {}
}

wxss

.sliding-box{width: 100%;margin: 0 auto;height: 60rpx;line-height: 60rpx;background: #ddd;text-align: center;box-sizing: border-box;padding-right: 40rpx;
}.label{width: 100%;line-height: 60rpx;position: absolute;top: 0;left: 0;text-align: center;z-index: 2;font-size: 24rpx;color: #333;
}.sliding-area{position: absolute;top: 0;left: 0;z-index: 3;
}.sliding-block{position: absolute;top: 0;left: 0;background: #fff;border: 1rpx solid #ddd;text-align: center;line-height: 56rpx;padding: 0 16rpx;color: #999;font-size: 24rpx;
}.sliding-icon{border: 1rpx solid #29C701;
}.has-slip{position: absolute;top: 0;left: 0;width: 0;line-height: 60rpx;height: 60rpx;background:  #29C701;text-align: center;overflow:hidden;z-index: 1;color: #fff;font-size: 24rpx;
}

微信小程序组件（车牌号输入，支付键盘，滑块验证）相关推荐

微信小程序模拟车牌号键盘
微信小程序模拟车牌号键盘效果图中文键盘英文数字键盘项目地址:https://github.com/ushars/keyboard
微信小程序实现车牌号录入
实现效果如下图所示: 废话不多说,直接上代码,如果有需要直接复制代码到项目里面,注册组件即可. <view class="modal-box"><view cla ...
微信小程序新能源车牌号
<view class='che'><view bindtap='go'>请输入要办理ETC车辆的的车牌号</view><view class='fle'&g ...
微信小程序自定义车牌号输入键盘-附源码
键盘已做过处理第一位只能是省份简称,第二位只能输入字母,第三位以后可以输入数字加字母的组合,输入完成后有正则方法校验车牌号的合法性.高效率车牌号输入键盘,大大提升用户体验,增强用户输入车牌号的真实性 ...
微信小程序组件、路由、组件通信、侦听器
一.微信小程序组件组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件组件是视图层的基本组成单元. 组件自带一 ...
微信小程序组件 —— 带搜索功能的选择器
微信小程序组件 -- 带搜索功能的选择器效果组件 search-picker 文件 wxml 文件: <view class="search-picker">< ...
android img标签属性_微信小程序组件叠加效果（如 Android 中的添加蒙层）
实现的效果如下: 可以看出这是由image组件和text组件叠加到一块组成的蒙层效果. 在小程序中实现这个效果主要用到z-index属性和position属性 z-index的使用必须是双方组件都设置 ...
微信小程序组件间通信（二）
2019独角兽企业重金招聘Python工程师标准>>> 一.微信小程序中通过事件,实现子组件向父组件中传递数据或操作注:子组件向父组件中传递通过事件传递操作通过事件参数对象det ...
【微信小程序】三、微信小程序组件的基本使用
五.微信小程序组件微信小程序框架为开发者提供了一系列组件,开发者可以通过组合这些组件进行快速开发. (1)微信小程序组件基础概念什么是组件? 组件是视图层的基本组成单元. 组件自带一些功能与微信风 ...

微信小程序组件（车牌号输入，支付键盘，滑块验证）

车牌号输入组件

密码支付键盘组件

滑块验证组件

微信小程序组件（车牌号输入，支付键盘，滑块验证）相关推荐

最新文章

热门文章