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

2023-11-05 18:30
文章标签 uniapp 组件 项目 app 数字键盘

本文主要是介绍uniapp踩坑之项目：uniapp数字键盘组件—APP端，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

这篇关于uniapp踩坑之项目：uniapp数字键盘组件—APP端的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/351695。

相关文章

深度解析Java项目中包和包之间的联系

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次，点赞13次，收藏8次。本文详细介绍了Java分层架构中的几个关键包：DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1
阅读更多...
如何在Spring Boot项目中集成MQTT协议

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅
阅读更多...
springboot项目打jar制作成镜像并指定配置文件位置方式

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》：本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文
阅读更多...
怎么用idea创建一个SpringBoot项目

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备（JDK1.8+、Maven3.2.5+）、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA，点击New新建一个项
阅读更多...
springboot项目中整合高德地图的实践

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》：本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一：高德开放平台的使用二：创建数据库（我是用的是mysql）三：Springboot所需的依赖（根据你的需求再
阅读更多...
一文详解如何在idea中快速搭建一个Spring Boot项目

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热
阅读更多...
SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

《SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志》在SpringBoot项目中,使用logback-spring.xml配置屏蔽特定路径的日志有两种常用方式,文中的... 目录方案一：基础配置（直接关闭目标路径日志）方案二：结合 Spring Profile 按环境屏蔽关
阅读更多...
MySQL版本问题导致项目无法启动问题的解决方案

MySQL版本问题导致项目无法启动问题的解决方案

《MySQL版本问题导致项目无法启动问题的解决方案》本文记录了一次因MySQL版本不一致导致项目启动失败的经历,详细解析了连接错误的原因,并提供了两种解决方案：调整连接字符串禁用SSL或统一MySQL... 目录本地项目启动报错报错原因：解决方案第一个：第二种：容器启动mysql的坑两种修改时区的方法：本地
阅读更多...
Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor？二、核心方法解
阅读更多...
springboot项目中使用JOSN解析库的方法

springboot项目中使用JOSN解析库的方法

《springboot项目中使用JOSN解析库的方法》JSON,全程是JavaScriptObjectNotation,是一种轻量级的数据交换格式,本文给大家介绍springboot项目中使用JOSN... 目录一、jsON解析简介二、Spring Boot项目中使用JSON解析1、pom.XML文件引入依
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2