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

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

//main.js全局引入

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

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

 //单页面使用

//html

  




//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