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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/132361.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

平面扫描(Plane-sweeping)深度体会

平面扫描(Plane-sweeping)深度体会

先看文章 三维重建之平面扫描算法&#xff08;Plane-sweeping&#xff09;_plane sweeping_小玄玄的博客-CSDN博客 Plane Sweeping | 平面扫描 - 知乎 (zhihu.com) 注意平面Dm,这是其中一个平面&#xff0c;平面上有一个M点&#xff0c;这个点也再物体上。所以会被摄像机看到…
阅读更多...
SSD-1B：Segmind的加速稳定扩散模型

SSD-1B：Segmind的加速稳定扩散模型

Segmind 稳定扩散模型 (SSD-1B) 是稳定扩散 XL (SDXL) 缩小 50% 的精简版本&#xff0c;可提供 60% 的加速&#xff0c;同时保持高质量的文本到图像生成功能。 它已经过各种数据集的训练&#xff0c;包括 Grit 和 Midjourney scrap 数据&#xff0c;以增强其根据文本提示创建各…
阅读更多...
docker---dockerfile相关知识

docker---dockerfile相关知识

第 3 章 Docker 高级实践 在这一部分我们主要来介绍一些Docker的高级内容&#xff1a; Dockerfile 和 Docker compose 3.1 Dockerfile Dockerfile我们从下面的几个方面来介绍&#xff1a; Dockerfile简介 Dockerfile快速入门 Dockerfile详解 Dockerfile简单 实践 3.1.1 Docke…
阅读更多...
python-opencv写入视频文件无法播放

python-opencv写入视频文件无法播放

python-opencv写入视频文件无法播放 在采用Python写OpenCV的视频时&#xff0c;生成的视频总是无法播放&#xff0c;大小只有不到两百k&#xff0c;播放器提示视频已经损坏。网上搜了一些方法&#xff0c;记录下解决办法。 代码如下 fourcc cv2.VideoWriter_fourcc(*MJPG) fp…
阅读更多...
腾讯云CVM服务器操作系统镜像大全

腾讯云CVM服务器操作系统镜像大全

腾讯云CVM服务器的公共镜像是由腾讯云官方提供的镜像&#xff0c;公共镜像包含基础操作系统和腾讯云提供的初始化组件&#xff0c;公共镜像分为Windows和Linux两大类操作系统&#xff0c;如TencentOS Server、Windows Server、OpenCloudOS、CentOS Stream、CentOS、Ubuntu、Deb…
阅读更多...
性能工作站，双十一大促，超值推荐：蝰蛇峡谷 NUC12SNKi7迷你主机，优惠抢购！

性能工作站，双十一大促，超值推荐：蝰蛇峡谷 NUC12SNKi7迷你主机，优惠抢购！

近年来&#xff0c;ITX主机和小型化系统变得越来越受欢迎。英特尔的NUC受到许多玩家们的关注。作为mini主机的代表NUC小巧设计和灵活性使它成为很多玩家和科技爱好者的选择。它的高性能和可玩性使得它在迷你型准系统市场上备受推崇。双11来临之际&#xff0c;我们分析下哪款高性…
阅读更多...
世微LED 大功率升压恒流驱动芯片 平板显示LED背光板灯串恒流控制器 AP9193

世微LED 大功率升压恒流驱动芯片 平板显示LED背光板灯串恒流控制器 AP9193

概述 AP9193 是一款高效率、高精度的升 压型大功率 LED 灯恒流驱动控制芯片。 AP9193 内置高精度误差放大器&#xff0c;固 定关断时间控制电路&#xff0c;恒流驱动电路等&#xff0c; 特别适合大功率、多个高亮度 LED 灯的串 恒流驱动。 AP9193 采用固定关断时间的控制方 式…
阅读更多...
产业园区中工业厂房的能源综合配置——工业园区综合能源数字化系统建设方案

产业园区中工业厂房的能源综合配置——工业园区综合能源数字化系统建设方案

以下内容转自微信公众号&#xff1a;PPP产业大讲堂&#xff0c;《产业园区中工业厂房的能源综合配置》。 园区工业地产中能源综合配置存在的问题 我国园区工业地产建设已历经近40年的发展, 园区在区域经济发展、产业集聚方面发挥了重要的载体和平台作用, 有力推动了我国社会经…
阅读更多...
聊一聊关于手机Charge IC的电流流向

聊一聊关于手机Charge IC的电流流向

关于手机Charge&#xff0c;小白在以前的文章很少讲&#xff0c;一是这部分东西太多&#xff0c;过于复杂。二是总感觉写起来欠缺点什么。但后来想一想&#xff0c;本是抱着互相学习来写文章的心理态度&#xff0c;还是决定尝试写一些。 关于今天要讲的关于手机Charge的内容&a…
阅读更多...
史上最全Windows安全工具汇总

史上最全Windows安全工具汇总

史上最全Windows安全工具锦集来源于网络整理&#xff0c;安全性自测。 下载方式&#xff1a;史上最全Windows安全工具汇总
阅读更多...
shiro 框架使用学习

shiro 框架使用学习

简介 Shiro安全框架是Apache提供的一个强大灵活的安全框架Shiro安全框架提供了认证、授权、企业会话管理、加密、缓存管理相关的功能&#xff0c;使用Shiro可以非常方便的完成项目的权限管理模块开发 Shiro的整体架构 1、Subject ​ Subject即主体&#xff08;可以把当前用户…
阅读更多...
Mysql Cluster (NDB - Network Database) - 分布式

Mysql Cluster (NDB - Network Database) - 分布式

Mysql高可用架构 复制&#xff08;Replication&#xff09; 是本文中所有 MySQL 技术的基础。包括&#xff1a;异步复制、半同步复制&#xff0c;增强半同步复制。InnoDB 副本集&#xff08;MySQL InnoDB ReplicaSet&#xff09; 无缝衔接其他 MySQL 官方提供的应用程序&#…
阅读更多...
没有MES管理系统，先用数据采集设备能有用吗

没有MES管理系统，先用数据采集设备能有用吗

在当前的数字化时代&#xff0c;企业纷纷意识到了数字化转型的重要性。数据被誉为新型生产要素&#xff0c;对于企业的运营和决策具有至关重要的作用。在数字化转型的过程中&#xff0c;许多企业面临着一个共同的问题&#xff1a;如何获取所需的数据&#xff1f; 有两家企业在…
阅读更多...
偶数矩阵判断【C语言作业】

偶数矩阵判断【C语言作业】

题目 若一个布尔矩阵所有行和所有列的和都是偶数&#xff0c;则称为偶数矩阵。请编写一个程序&#xff0c;判断一个布尔矩阵是否是偶数矩阵。 要求&#xff1a; &#xff08;1&#xff09;输入:首先输入一个正整数n(n<100),代表该矩阵的大小&#xff0c;接下来是n行n列的矩…
阅读更多...
TCP/IP协议群

TCP/IP协议群

TCP/IP协议群 什么是TCP/IP协议群 从字面意义上讲&#xff0c;有人可能会认为 TCP/IP 是指 TCP 和 IP 两种协议。实际生活当中有时也确实就是指这两种协议。然而在很多情况下&#xff0c;它只是利用 IP 进行通信时所必须用到的协议群的统称。具体来说&#xff0c;IP 或 ICMP、…
阅读更多...
微信小程序 uCharts的使用方法

微信小程序 uCharts的使用方法

一、背景 微信小程序项目需要渲染一个柱状图&#xff0c;使用uCharts组件完成 uCharts官网指引&#x1f449;&#xff1a;uCharts官网 - 秋云uCharts跨平台图表库 二、实现效果 三、具体使用 进入官网查看指南&#xff0c;有两种方式进行使用&#xff1a;分别是原生方式与组…
阅读更多...
pytorch实现 --- 手写数字识别

pytorch实现 --- 手写数字识别

本篇文章是博主在人工智能等领域学习时&#xff0c;用于个人学习、研究或者欣赏使用&#xff0c;并基于博主对人工智能等领域的一些理解而记录的学习摘录和笔记&#xff0c;若有不当和侵权之处&#xff0c;指出后将会立即改正&#xff0c;还望谅解。文章分类在Pytorch&#xff…
阅读更多...
Prometheus接入AlterManager配置企业微信告警(基于K8S环境部署)

Prometheus接入AlterManager配置企业微信告警(基于K8S环境部署)

文章目录 一、创建企业微信机器人二、配置AlterManager告警发送至企业微信三、Prometheus接入AlterManager配置四、部署PrometheusAlterManager(放到一个Pod中)五、测试告警 注意&#xff1a;请基于 PrometheusGrafana监控K8S集群(基于K8S环境部署)文章之上做本次实验。 一、创…
阅读更多...
Sui浏览器现支持查看已验证的Move源代码

Sui浏览器现支持查看已验证的Move源代码

Sui浏览器现在包含了Sui框架包的源代码视图&#xff0c;这是一个备受欢迎的功能。这个新的“已验证源代码&#xff08;Source Verified&#xff09;”选项卡位于现有的“字节码&#xff08;Bytecode&#xff09;”选项卡旁边&#xff0c;使开发人员可以点击查看以下包的源代码&…
阅读更多...
RFID技术在固定资产的应用

RFID技术在固定资产的应用

作为RFID系统中不可或缺的关键组件&#xff0c;读写器在固定资产管理中扮演着重要的角色。它利用RFID技术&#xff0c;能够迅速而有效地捕获、记录和跟踪资产信息&#xff0c;以实现更为高效和准确的资产管理。在本文中&#xff0c;我们将深入探讨RFID技术在固定资产管理领域的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023