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

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

news2024/11/27 0:43:27

//在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') { //加1
                val = NP.plus(Number(val), 1) + '';
            } else if (sign == 'minus') { //减1
                val = 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 = false
                this.isChecked2 = false
                this.isChecked3 = false
                this.isChecked4 = false
                this.isChecked5 = false
                this.isChecked6 = false
            }

        },

keyboardConfirm(val) {
            console.log(val)
            this.inputValue = val
            this.isShowKeyboardWindow = false

            this.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-PLUS
                if (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-PLUS
                if (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