数据库网站建设,网页制作与网站建设技术大全 下载,启用wordpress rest api,一些常用的网站微信小程序input自带数字输入键盘#xff0c;不过是直接调用的系统键盘#xff0c;无法个性化。
代码中使用使用了Vant WeappVant UI小程序版#xff0c;这里就不介绍相关安装说明了#xff0c;大家自行安装Vant Weapp。 json 用到的组件 {usingComponents: …微信小程序input自带数字输入键盘不过是直接调用的系统键盘无法个性化。
代码中使用使用了Vant WeappVant 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 || 点击打分}} bindtaptapScore /!-- 打分键盘 --
van-popupshow{{ keyboardShow }}positionbottomcustom-styleheight: 508rpx;bind:closeonClose
view classkeyboradview classinputvan-fieldvalue{{ value }}custom-styleborder: 2prx solid #dcdee0placeholder请选择分数disabled//viewview classnumber-keyboardvan-row classnumber gutter10van-colwx:for{{number}}wx:keyindexdata-key{{item}}custom-classnumber-itemspan{{item 0 ? 16 : 8}}bindtaptapNumberview classnumber-item__key tap-key{{item}}/view/van-col/van-rowview classoperationview classdel tap-key bindtaptapBkspimage classdel-icon src/assets/backspace.png/image/viewview classconfirm tap-key bindtapconfirm确定/view/view/view/view
/van-popupjs 内容 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.datasetlet { value } this.datavalue 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.datavalue String(value)value value.substr(0, value.length - 1)this.setData({value})},// 确定confirm() {let { value } this.datathis.setData({score: value,keyboardShow: false})},
})wxss 样式 .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;
}
