小程序自定义键盘组件之车牌号录入

效果图：

html:

<view bindtap="showAddCarNumFun">点击新增车牌号</view><view class="addCarNumBg" wx:if="{{showAddCarNum}}" catchtap="closeAddCarNum"></view>
<view class="addCarNumContent" wx:if="{{showAddCarNum}}"><view class="carNumSelectBox"><view class="carNumSelectTip">请输入完整车牌</view><view class="flexAround"><view class="carNumSelectItem {{itemActiveIndex==index?'itemActiveClass':''}}" data-index="{{index}}" wx:for="{{carNumArr}}" bindtap="itemActive"><view>{{item}}</view></view></view></view><view class="customKeyboard"><view class="customKeyboardClose flexBetween"><view class="{{cansave?'cansaveClass':''}}" bindtap="{{cansave?'saveCarNum':''}}">保存</view><view class="closeAddCarNum" catchtap="closeAddCarNum">关闭</view></view><view class="keyboardBox flex" style="flex-wrap: wrap;"><view class="keyboardItem {{item.name==''?'nameNone':''}} {{item.disabled?'disabledActive':''}}" wx:for="{{itemActiveIndex==0?keyboard1:itemActiveIndex==1?keyboard2:itemActiveIndex==6?keyboard4:keyboard3}}" bindtap="{{item.disabled?'':'choosedText'}}" data-text="{{item.name}}">{{item.name}}</view><view class="keyboardItem" bindtap="delCarNumSelect">删</view></view></view>
</view>

css:

.addCarNumBg{position: fixed;top: 0;left: 0;z-index: 400;width: 100%;height: 100vh;background: rgba(0, 0, 0, 0.6)}
.carNumSelectBox{position: fixed;bottom: 500rpx;left: 0;width: calc(100% - 60rpx);margin: 30rpx;z-index: 500}
.carNumSelectItem{width: 12%;height: 92rpx;line-height: 92rpx;text-align: center;background: white;margin-bottom: 10rpx;font-size: 34rpx;font-weight: bold;border: 1px solid #e5e5e5;border-radius: 4rpx}
.carNumSelectTip{font-size: 44rpx;font-weight: bold;text-align: center;margin-bottom: 50rpx;color: #f7f7f7}.customKeyboard{position: fixed;bottom: 0;left: 0;z-index: 500}
.customKeyboardClose{position: absolute;top: -92rpx;left: 0;height: 92rpx;line-height: 92rpx;background: white;width: calc(100% - 40rpx);border-top: 1px solid #e5e5e5;padding: 0 20rpx;font-size: 34rpx;color: #666;}.keyboardBox{background: #e5e5e5;padding: 20rpx 10rpx;padding-bottom: 0}
.keyboardItem{width: 9.0%;margin: 0.5%;height: 72rpx;line-height: 72rpx;text-align: center;background: white;margin-bottom: 20rpx;font-size: 30rpx;border-radius: 6rpx;box-shadow: 0 1px 2px #999;}
.disabledActive{background: #f7f7f7;color:#ccc}
.itemActiveClass{transform: scale(1.1);border: 1px solid #008cd7}.cansaveClass{color: #008cd7}
.nameNone{background: none;box-shadow: none}.flex{display: flex;align-items: center}
.flexBetween{display: flex;justify-content: space-between;align-items: center}
.flexAround{display: flex;justify-content: space-around;align-items: center}

js:

Component({properties: {props: { // 属性名type: Array,value: ''}},observers: {},data: {itemActiveIndex: 0,showAddCarNum: false,keyboard1: [{ name: '京', disabled: false }, { name: '津', disabled: false },{ name: '晋', disabled: false }, { name: '冀', disabled: false },{ name: '蒙', disabled: false }, { name: '辽', disabled: false },{ name: '吉', disabled: false }, { name: '黑', disabled: false },{ name: '沪', disabled: false }, { name: '苏', disabled: false },{ name: '浙', disabled: false }, { name: '皖', disabled: false },{ name: '闽', disabled: false }, { name: '赣', disabled: false },{ name: '鲁', disabled: false }, { name: '豫', disabled: false },{ name: '鄂', disabled: false }, { name: '湘', disabled: false },{ name: '粤', disabled: false }, { name: '桂', disabled: false },{ name: '琼', disabled: false }, { name: '渝', disabled: false },{ name: '川', disabled: false }, { name: '贵', disabled: false },{ name: '云', disabled: false }, { name: '藏', disabled: false },{ name: '陕', disabled: false }, { name: '甘', disabled: false },{ name: '青', disabled: false }, { name: '宁', disabled: false },{ name: '新', disabled: false }, { name: 'W', disabled: false },{ name: '', disabled: true }, { name: '', disabled: true },{ name: '', disabled: true }, { name: '', disabled: true },{ name: '', disabled: true }, { name: '', disabled: true },{ name: '', disabled: true }],keyboard2: [{ name: '1', disabled: true }, { name: '2', disabled: true },{ name: '3', disabled: true }, { name: '4', disabled: true },{ name: '5', disabled: true }, { name: '6', disabled: true },{ name: '7', disabled: true }, { name: '8', disabled: true },{ name: '9', disabled: true }, { name: '0', disabled: true },{ name: 'Q', disabled: false }, { name: 'W', disabled: false },{ name: 'E', disabled: false }, { name: 'R', disabled: false },{ name: 'T', disabled: false }, { name: 'Y', disabled: false },{ name: 'U', disabled: false }, { name: 'O', disabled: false },{ name: 'P', disabled: false }, { name: '军', disabled: true },{ name: 'A', disabled: false }, { name: 'S', disabled: false },{ name: 'D', disabled: false }, { name: 'F', disabled: false },{ name: 'J', disabled: false }, { name: 'K', disabled: false },{ name: 'G', disabled: false }, { name: 'H', disabled: false },{ name: 'L', disabled: false }, { name: '警', disabled: true },{ name: 'Z', disabled: false }, { name: 'X', disabled: false },{ name: 'C', disabled: false }, { name: 'V', disabled: false },{ name: 'B', disabled: false }, { name: 'N', disabled: false },{ name: 'M', disabled: false }, { name: '港', disabled: true },{ name: '澳', disabled: true }],keyboard3: [{ name: '1', disabled: false }, { name: '2', disabled: false },{ name: '3', disabled: false }, { name: '4', disabled: false },{ name: '5', disabled: false }, { name: '6', disabled: false },{ name: '7', disabled: false }, { name: '8', disabled: false },{ name: '9', disabled: false }, { name: '0', disabled: false },{ name: 'Q', disabled: false }, { name: 'W', disabled: false },{ name: 'E', disabled: false }, { name: 'R', disabled: false },{ name: 'T', disabled: false }, { name: 'Y', disabled: false },{ name: 'U', disabled: false }, { name: 'O', disabled: true },{ name: 'P', disabled: false }, { name: '军', disabled: true },{ name: 'A', disabled: false }, { name: 'S', disabled: false },{ name: 'D', disabled: false }, { name: 'F', disabled: false },{ name: 'J', disabled: false }, { name: 'K', disabled: false },{ name: 'G', disabled: false }, { name: 'H', disabled: false },{ name: 'L', disabled: false }, { name: '警', disabled: true },{ name: 'Z', disabled: false }, { name: 'X', disabled: false },{ name: 'C', disabled: false }, { name: 'V', disabled: false },{ name: 'B', disabled: false }, { name: 'N', disabled: false },{ name: 'M', disabled: false }, { name: '港', disabled: true },{ name: '澳', disabled: true }],keyboard4: [{ name: '1', disabled: false }, { name: '2', disabled: false },{ name: '3', disabled: false }, { name: '4', disabled: false },{ name: '5', disabled: false }, { name: '6', disabled: false },{ name: '7', disabled: false }, { name: '8', disabled: false },{ name: '9', disabled: false }, { name: '0', disabled: false },{ name: 'Q', disabled: false }, { name: 'W', disabled: false },{ name: 'E', disabled: false }, { name: 'R', disabled: false },{ name: 'T', disabled: false }, { name: 'Y', disabled: false },{ name: 'U', disabled: false }, { name: 'O', disabled: false },{ name: 'P', disabled: false }, { name: '军', disabled: false },{ name: 'A', disabled: false }, { name: 'S', disabled: false },{ name: 'D', disabled: false }, { name: 'F', disabled: false },{ name: 'J', disabled: false }, { name: 'K', disabled: false },{ name: 'G', disabled: false }, { name: 'H', disabled: false },{ name: 'L', disabled: false }, { name: '警', disabled: false },{ name: 'Z', disabled: false }, { name: 'X', disabled: false },{ name: 'C', disabled: false }, { name: 'V', disabled: false },{ name: 'B', disabled: false }, { name: 'N', disabled: false },{ name: 'M', disabled: false }, { name: '港', disabled: false },{ name: '澳', disabled: false }],carNumArr: ['', '', '', '', '', '', ''],cansave: false},ready() {},/*** 组件的方法列表*/methods: {//选择车牌choosedText: function (e) {let text = e.currentTarget.dataset.text;let itemActiveIndex = this.data.itemActiveIndex;this.setData({[`carNumArr[${itemActiveIndex}]`]: text})if (itemActiveIndex < 6) {itemActiveIndex += 1this.setData({itemActiveIndex})}let cansave = this.data.carNumArr.every(val => {return val != ''})if (cansave) {this.setData({cansave: true})}console.log(cansave)},//删除当前框的值delCarNumSelect: function () {let itemActiveIndex = this.data.itemActiveIndex;this.setData({[`carNumArr[${itemActiveIndex}]`]: ''})if (itemActiveIndex > 0) {itemActiveIndex -= 1this.setData({itemActiveIndex, cansave: false})}},saveCarNum: function () {let carNumArr = this.data.carNumArr;carNumArr = carNumArr.join('');console.log(carNumArr)},//选择输入框itemActive: function (e) {let index = e.currentTarget.dataset.index;this.setData({ itemActiveIndex: index })},//点击显示新增车牌showAddCarNumFun: function () {this.setData({ showAddCarNum: true })},//点击取消新增车牌closeAddCarNum: function () {this.setData({showAddCarNum: false,carNumArr: ['', '', '', '', '', '', ''],itemActiveIndex: 0})}}
})

小程序自定义键盘组件之车牌号录入相关推荐

微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放
小程序自定义音频组件,带滚动条摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的而微信小程序API给我们提供的就是这样的而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...
微信小程序自定义日历组件
微信小程序自定义日历组件 wxml <view class="maskWrap" bindtap="close"></view>< ...
java switch小程序,小程序自定义switch组件
如上图,小程序api中的switch组件只能自定义颜色,不能自定义宽高,所以就开始了自己写switch组件. 自定义组件样式 switch组件样式大致如图,样式思路:未选中时为一个长方形有圆角按钮,和 ...
微信小程序自定义波浪组件
最近看到好多app上有波浪背景,有动态的,有静态的,这里是在小程序中用得动态. 先看看效果图:里面的文本是组件内部定义的. 这是用两个svg的图片用css关键帧动画做的效果(这里谢谢子弹短信里前端群的 ...
微信小程序自定义弹窗组件 action-sheet
最近公司在开发短剧小程序,短剧的剧集展示交互需要用到组件 action-sheet,小程序自带的有这个组件,但是这个组件支持的功能比较单一,相当于是一个选择表一样,不能自定义很多内容,只能自定义一个组 ...
uniapp | 小程序自定义头部组件
前言:在开发小程序的过程中,很经常会遇到各种各样的需求,有些顶部没法很单一的只显示标题和纯色的背景,因此就需要按照项目需求自定义. 思路:先根据设计稿在页面中绘制出结构和样式的内容,接着固定的样式值改 ...
微信小程序-自定义导航组件
一.如何自定义组件从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版本 1.6.3 或更高. 开发者可以将页面内的功能模块抽象成自定义组件,以便在 ...
微信小程序-自定义NavBar组件
组件化组件化本身是一个可以讲的很大,也可以浓缩为封装可复用的,模版组件基于mvvm的微信小程序当然也支持这一特性,我们做项目的时候也可以把注入公用的header footer之类的封一封(其实工 ...

小程序自定义键盘组件之车牌号录入

小程序自定义键盘组件之车牌号录入

小程序自定义键盘组件之车牌号录入相关推荐

最新文章

热门文章