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

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

    2. <template>
    3.     <view class="digit-keyboard">
    4.         <view class="digit-keyboard_bg" @tap="hide">view>
    5.         <view class="digit-keyboard_area">
    6.             
    7.             <view class="number-area">
    8.                 <view class="item" @tap="modifyNum(1)">1view>
    9.                 <view class="item" @tap="modifyNum(2)">2view>
    10.                 <view class="item" @tap="modifyNum(3)">3view>
    11.                 <view class="item" @tap="modifyNum('del')">
    12.                     <icon type="cancel" size="20" />
    13.                 view>
    14.                 <view class="item" @tap="modifyNum(4)">4view>
    15.                 <view class="item" @tap="modifyNum(5)">5view>
    16.                 <view class="item" @tap="modifyNum(6)">6view>
    17.                 <view class="item" @tap="modifyNum('add')">加1view>
    18.                 <view class="item" @tap="modifyNum(7)">7view>
    19.                 <view class="item" @tap="modifyNum(8)">8view>
    20.                 <view class="item" @tap="modifyNum(9)">9view>
    21.                 <view class="item" style="background-color:#2278FA;color: #ffffff;" @tap="confirm">确定view>
    22.                 <view class="item" @tap="modifyNum('-')">-view>
    23.                 <view class="item" @tap="modifyNum(0)">0view>
    24.                 <view class="item" @tap="modifyNum('.')">.view>
    25.                 <view class="item" @tap="modifyNum('clear')">清除view>
    26.             view>
    27.         view>
    28.     view>
    29. template>
    30.  
    31. <script>
    32. import NP from '../../utils/numberPrecision'
    33. export default {
    34.     props: {
    35.         inputVal: {
    36.             type: [String],
    37.             default: ''
    38.         },
    39.         label: {
    40.             type: String,
    41.             default: '现金'
    42.         },
    43.  
    44.     },
    45.     data() {
    46.         return {
    47.             val: ''
    48.         };
    49.     },
    50.     created() {
    51.  
    52.     },
    53.     methods: {
    54.         input() {
    55.             // this.$emit('cancel');
    56.             let val = this.val;
    57.             console.log(val);
    58.             this.$emit('inputFocus', val);
    59.         },
    60.         //隐藏
    61.         hide() {
    62.             this.$emit('cancel');
    63.         },
    64.         confirm() {
    65.             let val = this.val;
    66.             let valNew = val.slice(-1);
    67.             if (valNew == '.') {
    68.                 val = val.slice(0, -1);
    69.             }
    70.             this.$emit('confirm', val);
    71.         },
    72.         modifyNum(sign) {
    73.  
    74.             let {
    75.                 val
    76.             } = this;
    77.             //删除
    78.             if (sign == 'del') {
    79.                 if (val.length > 0) {
    80.                     let valNew = val.slice(0, -1);
    81.                     if (valNew.length == 0) {
    82.                         val = '';
    83.                     } else {
    84.                         val = valNew;
    85.                     }
    86.                 }
    87.             } else if (sign == 'add') { //加1
    88.                 val = NP.plus(Number(val), 1) + '';
    89.             } else if (sign == 'minus') { //减1
    90.                 val = NP.minus(Number(val), 1) + '';
    91.             } else if (sign == 'clear') { //清除
    92.                 val = '';
    93.             } else if (sign == '-') { //代表负数
    94.                 if (val.indexOf('-') == -1) {
    95.                     val = '-' + val;
    96.                 }
    97.             } else if (sign == '.') { //点符号
    98.                 if (val.indexOf('.') == -1 && val.length > 0) {
    99.                     val = val + '.';
    100.                 }
    101.             } else {
    102.                 if ((val == '0' && sign == '0') || (val == '-0' && sign == '0') || (val == '0' && sign != '.') || (val == '-0' && sign != '.')) {
    103.                     return;
    104.                 }
    105.                 val = val + sign;
    106.             }
    107.             //小数点大于3位不赋值
    108.             let arr = val.split('.');
    109.             if (arr.length == 2 && arr[1].length > 3) {
    110.                 return;
    111.             }
    112.             this.$emit('inputFocus', val);
    113.             this.val = val;
    114.         }
    115.     }
    116. }
    117. script>
    118.  
    119.  
    120. <style lang="scss" scoped>
    121. .digit-keyboard {
    122.     position: fixed;
    123.     left: 0;
    124.     top: 0;
    125.     width: 100%;
    126.     height: 100%;
    127.     z-index: 999;
    128. }
    129.  
    130. .digit-keyboard_bg {
    131.     width: 100%;
    132.     height: 100%;
    133.     background: rgba($color: #000000, $alpha: 0.5);
    134. }
    135.  
    136. .digit-keyboard_area {
    137.     position: absolute;
    138.     bottom: 0;
    139.     left: 0;
    140.     width: 100%;
    141.     background: #efefef;
    142.     padding-bottom: 20upx;
    143. }
    144.  
    145. .input-area {
    146.     display: flex;
    147.     align-items: center;
    148.     padding: 10upx;
    149.     background: #ffffff;
    150.  
    151.     .item {
    152.         font-size: 28upx;
    153.  
    154.         &:nth-of-type(2) {
    155.             flex: 1 0 auto;
    156.             padding-right: 10upx;
    157.         }
    158.  
    159.         &:nth-of-type(3) {
    160.             font-size: 0;
    161.         }
    162.     }
    163.  
    164.     .input {
    165.         background: #eeeeee;
    166.         text-indent: 10upx;
    167.         font-size: 28upx;
    168.         height: 60upx;
    169.     }
    170. }
    171.  
    172. .number-area {
    173.     display: flex;
    174.     justify-content: space-around;
    175.     flex-wrap: wrap;
    176.     text-align: center;
    177.  
    178.     .item {
    179.         margin-top: 20upx;
    180.         flex: 0 0 22%;
    181.         background: #ffffff;
    182.         line-height: 80upx;
    183.         font-size: 30upx;
    184.         font-weight: bold;
    185.     }
    186. }
    187. style>

    //main.js全局引入

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

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

     //单页面使用

    1. //html
    3. class="content-input" 
    4. @click="clickInput" 
    5. @input="input" 
    6. v-model="inputValue" />
    7.   
    8. <view>
    9. <digitKeyboard 
    10. v-if="isShowKeyboardWindow" 
    11. @inputFocus="inputKeyboard" 
    12. :inputVal="inputVal" 
    13. :label="label" 
    14. @cancel="isShowKeyboardWindow = false" 
    15. @confirm="keyboardConfirm" />
    16. view>
    17.  
    18. //data
    19. // 数字键盘 
    20. inputVal: '',
    21. label: '现金支付',
    22. isShowKeyboardWindow: false,//是否显示键盘窗口
    23.  
    24. //js
    25. // 数字键盘
    26. inputKeyboard(e) {
    27.     // console.log(e, '00000000000')
    28.      this.inputValue = e //输入框双向绑定
    29.  
    30.      if (e) {
    31.                 this.isChecked1 = false
    32.                 this.isChecked2 = false
    33.                 this.isChecked3 = false
    34.                 this.isChecked4 = false
    35.                 this.isChecked5 = false
    36.                 this.isChecked6 = false
    37.             }
    38.  
    39.         },
    40.  
    41. keyboardConfirm(val) {
    42.             console.log(val)
    43.             this.inputValue = val
    44.             this.isShowKeyboardWindow = false
    45.  
    46.             this.isChecked1 = false;
    47.             this.isChecked2 = false;
    48.             this.isChecked3 = false;
    49.             this.isChecked4 = false;
    50.             this.isChecked5 = false;
    51.             this.isChecked6 = false;
    52.         },
    53. // 输入框点击事件
    54. clickInput() {
    55.             this.isShowKeyboardWindow = true // 数字键盘组件显示
    56.         },
    57. //充值按钮
    58. recharge: function (e) {
    59.   // 进行判断
    60.          if (this.inputValue !== '' || null || undefined) {// 为数字
    61.                 // 可调用支付接口
    62.                 // #ifdef APP-PLUS
    63.                 if (this.spaceCheck) {
    64.                     this.commitDialog()
    65.                 } else {
    66.                     // this.cancelDialog()
    67.                 }
    68.                 this.$refs.popupRef.show();
    69.                 // #endif
    70.             }
    71.             // 进行判断
    72.             if (
    73.                (this.inputValue == '' || null || undefined) 
    74.                 && this.current_tag == '' &&
    75.                 this.isChecked1 == false &&
    76.                 this.isChecked2 == false &&
    77.                 this.isChecked3 == false &&
    78.                 this.isChecked4 == false &&
    79.                 this.isChecked5 == false &&
    80.                 this.isChecked6 == false
    81.             ) { // 为空
    82.                 // console.log(33333333);
    83.                 uni.showToast({
    84.                     title: '请选择数值或输入内容！',
    85.                     duration: 2000,
    86.                     icon: 'none',
    87.                 });
    88.                 return false
    89.  
    90.             }
    91.             else if (
    92.                 (this.inputValue == '' || null || undefined) && 
    93.                 this.current_tag &&
    94.                 this.isChecked1 == false &&
    95.                 this.isChecked2 == false &&
    96.                 this.isChecked3 == false &&
    97.                 this.isChecked4 == false &&
    98.                 this.isChecked5 == false &&
    99.                 this.isChecked6 == false
    100.             ) {
    101.                 uni.showToast({
    102.                     title: '请选择数值或输入内容！',
    103.                     duration: 2000,
    104.                     icon: 'none',
    105.                 });
    106.                 return false
    107.             }
    108.  
    109.  
    110.             if (this.current_tag || this.isChecked2 == true) {// 进行判断
    111.                 // 可调用支付接口
    112.                 // #ifdef APP-PLUS
    113.                 if (this.spaceCheck) {
    114.                     this.commitDialog()
    115.                 } else {
    116.                     // this.cancelDialog()
    117.                 }
    118.                 this.$refs.popupRef.show();
    119.                 // #endif
    120.             }                    
    121.         }

    上一篇文章， 

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

  • 相关阅读:
    【Unity】编辑器扩展-03-拓展Inspector视图
    LabVIEW和Arduino的巧妙结合（基础篇—1）
    FireFox火狐浏览器电脑端安装到D盘
    Tomcat 集群介绍
    【Python入门】第二章: Python环境
    【推荐系统】行列式点过程(DPP)算法推导
    如何基于Angular从.ts获取鼠标响应的屏幕坐标，并传递至.html的Style中
    TensorRT详细入门指南
    HSQL总结
    应用启动加速-并发初始化spring bean
  • 原文地址：https://blog.csdn.net/weixin_43928112/article/details/134204799