当前位置：首页 > news >正文

uniapp踩坑之项目：uniapp数字键盘组件—APP端

news 来源：原创 2024/5/8 13:31:00

//在components文件夹创建digitKeyboard文件夹，再创建digitKeyboard.vue

<!-- 数字键盘 -->
<template><view class="digit-keyboard"><view class="digit-keyboard_bg" @tap="hide"></view><view class="digit-keyboard_area"><!-- <view class="input-area"><view class="item">{{label}}：</view><view class="item"><input :placeholder="inputVal" v-model="val" class="input" @input="input" disabled /></view><view class="item"><button type="primary" size="mini" @tap="confirm">确定</button></view></view> --><view class="number-area"><view class="item" @tap="modifyNum(1)">1</view><view class="item" @tap="modifyNum(2)">2</view><view class="item" @tap="modifyNum(3)">3</view><view class="item" @tap="modifyNum('del')"><icon type="cancel" size="20" /></view><view class="item" @tap="modifyNum(4)">4</view><view class="item" @tap="modifyNum(5)">5</view><view class="item" @tap="modifyNum(6)">6</view><view class="item" @tap="modifyNum('add')">加1</view><view class="item" @tap="modifyNum(7)">7</view><view class="item" @tap="modifyNum(8)">8</view><view class="item" @tap="modifyNum(9)">9</view><view class="item" style="background-color:#2278FA;color: #ffffff;" @tap="confirm">确定</view><view class="item" @tap="modifyNum('-')">-</view><view class="item" @tap="modifyNum(0)">0</view><view class="item" @tap="modifyNum('.')">.</view><view class="item" @tap="modifyNum('clear')">清除</view></view></view></view>
</template><script>
import NP from '../../utils/numberPrecision'
export default {props: {inputVal: {type: [String],default: ''},label: {type: String,default: '现金'},},data() {return {val: ''};},created() {},methods: {input() {// this.$emit('cancel');let val = this.val;console.log(val);this.$emit('inputFocus', val);},//隐藏hide() {this.$emit('cancel');},confirm() {let val = this.val;let valNew = val.slice(-1);if (valNew == '.') {val = val.slice(0, -1);}this.$emit('confirm', val);},modifyNum(sign) {let {val} = this;//删除if (sign == 'del') {if (val.length > 0) {let valNew = val.slice(0, -1);if (valNew.length == 0) {val = '';} else {val = valNew;}}} else if (sign == 'add') { //加1val = NP.plus(Number(val), 1) + '';} else if (sign == 'minus') { //减1val = NP.minus(Number(val), 1) + '';} else if (sign == 'clear') { //清除val = '';} else if (sign == '-') { //代表负数if (val.indexOf('-') == -1) {val = '-' + val;}} else if (sign == '.') { //点符号if (val.indexOf('.') == -1 && val.length > 0) {val = val + '.';}} else {if ((val == '0' && sign == '0') || (val == '-0' && sign == '0') || (val == '0' && sign != '.') || (val == '-0' && sign != '.')) {return;}val = val + sign;}//小数点大于3位不赋值let arr = val.split('.');if (arr.length == 2 && arr[1].length > 3) {return;}this.$emit('inputFocus', val);this.val = val;}}
}
</script><style lang="scss" scoped>
.digit-keyboard {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 999;
}.digit-keyboard_bg {width: 100%;height: 100%;background: rgba($color: #000000, $alpha: 0.5);
}.digit-keyboard_area {position: absolute;bottom: 0;left: 0;width: 100%;background: #efefef;padding-bottom: 20upx;
}.input-area {display: flex;align-items: center;padding: 10upx;background: #ffffff;.item {font-size: 28upx;&:nth-of-type(2) {flex: 1 0 auto;padding-right: 10upx;}&:nth-of-type(3) {font-size: 0;}}.input {background: #eeeeee;text-indent: 10upx;font-size: 28upx;height: 60upx;}
}.number-area {display: flex;justify-content: space-around;flex-wrap: wrap;text-align: center;.item {margin-top: 20upx;flex: 0 0 22%;background: #ffffff;line-height: 80upx;font-size: 30upx;font-weight: bold;}
}
</style>

//main.js全局引入

// 数字键盘组件在项目里main.js中配置如下代码

import digitKeyboard from './components/digitKeyboard/digitKeyboard.vue'
Vue.component('digitKeyboard', digitKeyboard)

//单页面使用

//html
<input 
class="content-input" 
@click="clickInput" 
@input="input" 
v-model="inputValue" /><!-- 数字键盘 -->
<view>
<digitKeyboard 
v-if="isShowKeyboardWindow" 
@inputFocus="inputKeyboard" 
:inputVal="inputVal" 
:label="label" 
@cancel="isShowKeyboardWindow = false" 
@confirm="keyboardConfirm" />
</view>//data
// 数字键盘 
inputVal: '',
label: '现金支付',
isShowKeyboardWindow: false,//是否显示键盘窗口//js
// 数字键盘
inputKeyboard(e) {// console.log(e, '00000000000')this.inputValue = e //输入框双向绑定if (e) {this.isChecked1 = falsethis.isChecked2 = falsethis.isChecked3 = falsethis.isChecked4 = falsethis.isChecked5 = falsethis.isChecked6 = false}},keyboardConfirm(val) {console.log(val)this.inputValue = valthis.isShowKeyboardWindow = falsethis.isChecked1 = false;this.isChecked2 = false;this.isChecked3 = false;this.isChecked4 = false;this.isChecked5 = false;this.isChecked6 = false;},
// 输入框点击事件
clickInput() {this.isShowKeyboardWindow = true // 数字键盘组件显示},
//充值按钮
recharge: function (e) {// 进行判断if (this.inputValue !== '' || null || undefined) {// 为数字// 可调用支付接口// #ifdef APP-PLUSif (this.spaceCheck) {this.commitDialog()} else {// this.cancelDialog()}this.$refs.popupRef.show();// #endif}// 进行判断if ((this.inputValue == '' || null || undefined) && this.current_tag == '' &&this.isChecked1 == false &&this.isChecked2 == false &&this.isChecked3 == false &&this.isChecked4 == false &&this.isChecked5 == false &&this.isChecked6 == false) { // 为空// console.log(33333333);uni.showToast({title: '请选择数值或输入内容！',duration: 2000,icon: 'none',});return false}else if ((this.inputValue == '' || null || undefined) && this.current_tag &&this.isChecked1 == false &&this.isChecked2 == false &&this.isChecked3 == false &&this.isChecked4 == false &&this.isChecked5 == false &&this.isChecked6 == false) {uni.showToast({title: '请选择数值或输入内容！',duration: 2000,icon: 'none',});return false}if (this.current_tag || this.isChecked2 == true) {// 进行判断// 可调用支付接口// #ifdef APP-PLUSif (this.spaceCheck) {this.commitDialog()} else {// this.cancelDialog()}this.$refs.popupRef.show();// #endif}                    }

上一篇文章，

vue2踩坑之项目：Swiper轮播图使用_意初的博客-CSDN博客文章浏览阅读456次。首先安装swiper插件，解决方法：npm 版本太高，切换一下就好了，引入Swiper，mounted里面调用https://blog.csdn.net/weixin_43928112/article/details/133681437