微信小程序input
自带数字输入键盘,不过是直接调用的系统键盘,无法个性化。
代码中使用使用了Vant Weapp
Vant UI小程序版,这里就不介绍相关安装说明了,大家自行安装Vant Weapp。
json 用到的组件
{
"usingComponents": {
"van-cell": "@vant/weapp/cell/index",
"van-button": "@vant/weapp/button/index",
"van-popup": "@vant/weapp/popup/index",
"van-field": "@vant/weapp/field/index",
"van-row": "@vant/weapp/row/index",
"van-col": "@vant/weapp/col/index"
}
}
wxml 结构
<van-cell title="分数" value="{{score || '点击打分'}}" bindtap="tapScore" />
<!-- 打分键盘 -->
<van-popup
show="{{ keyboardShow }}"
position="bottom"
custom-style="height: 508rpx;"
bind:close="onClose"
>
<view class="keyborad">
<view class="input">
<van-field
value="{{ value }}"
custom-style="border: 2prx solid #dcdee0"
placeholder="请选择分数"
disabled
/>
</view>
<view class="number-keyboard">
<van-row class="number" gutter="10">
<van-col
wx:for="{{number}}"
wx:key="index"
data-key="{{item}}"
custom-class="number-item"
span="{{item === 0 ? '16' : '8'}}"
bindtap="tapNumber">
<view class="number-item__key tap-key">{{item}}</view>
</van-col>
</van-row>
<view class="operation">
<view class="del tap-key" bindtap="tapBksp">
<image class="del-icon" src="/assets/backspace.png"></image>
</view>
<view class="confirm tap-key" bindtap="confirm">确定</view>
</view>
</view>
</view>
</van-popup>
js 内容文章来源:https://www.toymoban.com/news/detail-608495.html
Page({
data: {
score: '',
keyboardShow: false,
value: '',
number: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.']
},
tapScore() {
this.setData({
keyboardShow: true
})
},
onClose() {
this.setData({
keyboardShow: false
})
},
// number点击
tapNumber(e) {
const { key } = e.currentTarget.dataset
let { value } = this.data
value += key
/**
* 限制输入
* 开头不能是小数点
* 只能有一位小数点
* 0开头只能跟小数点
* 小数点后限制一位
*/
value = String(value)
.replace(/^\./g, '')
.replace('.', '$#$')
.replace(/\./g, '')
.replace('$#$', '.')
.replace(/^00$/, '0')
.replace(/^0(\d)/g, '$1')
.replace(/^(-)*(\d+)\.(\d{1}).*$/, '$1$2.$3')
this.setData({
value
})
},
// 退格
tapBksp() {
let { value } = this.data
value = String(value)
value = value.substr(0, value.length - 1)
this.setData({
value
})
},
// 确定
confirm() {
let { value } = this.data
this.setData({
score: value,
keyboardShow: false
})
},
})
wxss 样式文章来源地址https://www.toymoban.com/news/detail-608495.html
.keyborad .number-keyboard {
display: flex;
background-color: #ebedf0;
padding: 20rpx 20rpx 0 20rpx;
}
.keyborad .number-keyboard .tap-key:active {
opacity: 0.8;
}
.keyborad .number-keyboard .number {
flex: 1;
}
.keyborad .number-keyboard .number .number-item {
margin-bottom: 20rpx;
}
.keyborad .number-keyboard .number .number-item .number-item__key {
background-color: #fff;
text-align: center;
height: 80rpx;
line-height: 80rpx;
border-radius: 8rpx;
font-size: 32rpx;
font-weight: 700;
}
.keyborad .number-keyboard .operation {
width: 200rpx;
display: flex;
flex-direction: column;
margin: 0 0 20rpx 20rpx;
}
.keyborad .number-keyboard .operation .del {
height: 80rpx;
text-align: center;
margin-bottom: 20rpx;
background-color: #fff;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
}
.keyborad .number-keyboard .operation .del .del-icon {
width: 40rpx;
height: 40rpx;
}
.keyborad .number-keyboard .operation .confirm {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background-color: #04943f;
border-radius: 8rpx;
color: #fff;
font-size: 36rpx;
}
.keyborad .van-field__control--disabled {
color: #666 !important;
}
到了这里,关于微信小程序数字键盘(仿微信转账键盘)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!