uniapp+vue3实现数字键盘

已于 2024-06-20 16:37:34 修改
阅读量612 收藏
点赞数 7
文章标签： uni-app javascript 开发语言 css vue.js
于 2024-06-14 11:09:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57986195/article/details/139676130
版权

1.首先第一步需要定义变量

let numbers = reactive([

		{
			text: '1',
			class: 'oner',
			background: '#ffffff'

		},
		{
			text: '2',
			class: 'oner',
			background: '#ffffff'
		},
		{
			text: '3',
			class: 'oner',
			background: '#ffffff'
		},
		{
			text: '4',
			class: 'oner',
			background: '#ffffff'
		},
		{
			text: '5',
			class: 'oner',
			background: '#ffffff'
		},
		{
			text: '6',
			class: 'oner',
			background: '#ffffff'
		},
		{
			text: '7',
			class: 'oner',
			background: '#ffffff'
		},
		{
			text: '8',
			class: 'oner',
			background: '#ffffff'
		},
		{
			text: '9',
			class: 'oner',
			background: '#ffffff'
		},
		{
			text: '0',
			class: 'big',
			background: '#ffffff'
		},
		{
			text: '.',
			class: 'oner',
			background: '#ffffff'
		},
	])
	// 确认的样式
	let active = reactive({
		background: ' #f2f2f2',
		color: '#d4d4d4'
	})
	let styleDelete= reactive({
		background: '#ffffff'
	})
	let stylelv = reactive({
		background: '#3bab6f'
	})
	let nums = ref('')

	let isimit = ref(false)

	let showBox = ref(false)

	let activeIndex = ref(0) //默认选中索引

	let sumindex = ref(-1) //数字键盘索引

	let valuemark = ref()
	let preinput = ref('请输入付款金额')

2.渲染页面

<view class="keyboard">
			<view class="numbers">
				<view
					style=" display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: flex-start; width: 72%; height: auto;">
					<view @click="changeNums(item,index)" :class="item.class" :style="getListitemstyle(index)"
						v-for="(item,index) in numbers">
						{{item.text}}
					</view>
				</view>
				<view style="width: 28%; height: auto; display: flex; flex-flow: column wrap; ">
					<view @click="handleDelete()" class="oner" :style="styleDelete">
						<image src="../../static/chahao.png" mode="aspectFit" style="width: 50rpx; height: 50rpx;">
						</image>
					</view>
					<view class="onerplus" @click="handlePayment" :style="stylelv">
						支付
					</view>
				</view>
</view>

3.设置css样式

// 键盘样式
	.Classify {
		width: 100%;
		display: flex;
		height: 120rpx;
		margin-top: 10rpx;
		padding-left: 20rpx;
		padding-right: 30rpx;
		align-items: center;
		margin-bottom: -12rpx;
		justify-self: flex-start;

	}

	.Expenditure {
		width: auto;
		height: 60rpx;
		color: #c7c7c7;
		font-size: 30rpx;
		text-align: center;
		line-height: 60rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		background-color: #f7f7f7;
		padding: 0rpx 20rpx 0rpx 20rpx;

	}

	.Expendituretime {
		width: auto;
		color: black;
		display: flex;
		height: 60rpx;
		font-size: 30rpx;
		line-height: 60rpx;
		margin-left: 32rpx;
		align-items: center;
		border-radius: 10rpx;
		background-color: #f7f7f7;
		justify-content: space-evenly;
		padding: 0rpx 15rpx 0rpx 20rpx;

	}

	.Expenditurelv {
		width: auto;
		height: 60rpx;
		color: #3eb575;
		font-size: 30rpx;
		text-align: center;
		line-height: 60rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		background-color: #ebf7f1;
		padding: 0rpx 20rpx 0rpx 20rpx;

	}

	.ExpenditureH {
		width: auto;
		height: 60rpx;
		color: #f5c53a;
		font-size: 30rpx;
		text-align: center;
		line-height: 60rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		background-color: #fdf8eb;
		padding: 0rpx 20rpx 0rpx 20rpx;

	}

	.ExpenditureL {
		width: auto;
		height: 60rpx;
		color: #8c8bc3;
		font-size: 30rpx;
		text-align: center;
		line-height: 60rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		background-color: #f1f3f6;
		padding: 0rpx 20rpx 0rpx 20rpx;

	}

	.money-input {
		width: 100%;
		height: 150rpx;
		// padding: 0 40rpx 0 40rpx;
	}

	.Type {
		width: 100%;
		height: 154px;
		display: flex;
		margin-top: 20rpx;
		align-items: center;
		flex-flow: row wrap;
		justify-content: flex-start;
		overflow-y: auto;

	}

	.Type-box {
		display: flex;
		width: 120rpx;
		height: 140rpx;
		align-items: center;
		flex-flow: column wrap;
		justify-content: center;
		margin: 0 0rpx 10rpx 5rpx;

	}

	.Typeboxactive {
		display: flex;
		width: 120rpx;
		height: 140rpx;
		align-items: center;
		flex-flow: column wrap;
		justify-content: center;
		margin: 0 0rpx 10rpx 5rpx;
		background-color: #cbcbcb;
	}

	.inctiveclass {
		width: 80rpx;
		display: flex;
		height: 80rpx;
		font-size: 22rpx;
		border-radius: 50%;
		align-items: center;
		justify-content: center;
		background-color: #e7e7e7;

	}

	.activeclass {
		width: 80rpx;
		display: flex;
		height: 80rpx;
		border-radius: 50%;
		align-items: center;
		justify-content: center;
		background-color: #3eb575;

	}

	.keyboard {
		position: absolute;
		bottom: 0rpx;
	}

	.numbers {
		width: 100%;
		display: flex;
		height: 480rpx;
		margin-top: 10rpx;
		background-color: #fafafa;
		justify-content: flex-start;
	}

	.remark {
		width: 100%;
		color: #50648a;
		height: 100rpx;
		font-size: 32rpx;
		padding: 20rpx 0 0 30rpx;

	}

	.oner {
		display: flex;
		width: 165rpx;
		height: 100rpx;
		font-size: 34rpx;
		font-weight: bold;
		align-items: center;
		border-radius: 10rpx;
		justify-content: center;
		margin: 15rpx auto 5rpx;
		background-color: #ffffff;

	}

	.onerplus {
		display: flex;
		width: 165rpx;
		color: #ffffff;
		height: 338rpx;
		font-size: 34rpx;
		font-weight: bold;
		align-items: center;
		border-radius: 10rpx;
		justify-content: center;
		margin: 15rpx auto 5rpx;
		background-color: #9cd7b7;

	}

	.big {
		display: flex;
		width: 342rpx;
		height: 100rpx;
		font-size: 34rpx;
		font-weight: bold;
		align-items: center;
		border-radius: 10rpx;
		margin: 15rpx auto 5rpx;
		justify-content: center;
		background-color: #ffffff;

	}

	.input-container {
		position: relative;
		width: 100%;
		height: 156rpx;
		display: flex;
	}

	.input-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
		// border-bottom: 1px solid #ccc;
		// padding: 0 20rpx;
		// padding: 20rpx 20rpx 0rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.input-icon {
		height: 106rpx;
		width: 5rpx;
		background-color: #cbcbcb;
		display: none;
	}

	.active {
		display: block;
		animation: blink 1s infinite; //点击后|出现
	}

	@keyframes blink {
		0% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	.input-iconone {
		position: absolute;
		top: 50%;
		left: 2rpx;
		transform: translateY(-50%);
		color: #666;
	}

	.input-field {
		width: 100%;
		height: 100%;
		line-height: 156rpx;
		padding-left: 80rpx;
		font-size: 80rpx;
		color: #333;
	}

	.remarks {
		width: 68px;
		height: 30px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.box-text {
		display: flex;
		justify-content: center;
		color: #c7c7c7;
		align-items: center;
		width: 100%;
		margin-top: 10rpx;
		height: 40rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.box-ative {
		display: flex;
		justify-content: center;
		color: #000000;
		align-items: center;
		width: 100%;
		margin-top: 10rpx;
		height: 40rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.top {
		position: relative;
		width: 100%;
		height: 30%;
	}

	.window {
		width: 100rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
	}

	.center {
		position: relative;
		width: 100%;
		height: 30%;
		display: flex;
		padding: 0 30rpx 0 30rpx;
		justify-content: center;
		align-items: center;
	}

	.bottom {
		width: 100%;
		height: 40%;
		position: relative;
	}

	.comfors {
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		position: absolute;
		width: 380rpx;
		height: 100rpx;
		border-radius: 10rpx;
		background-color: #f2f2f2;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #d4d4d4;
		border: 1rpx solid #f2f2f2;
	}

	.Record-remarks-number-of-words {
		position: absolute;
		left: 30rpx;
		bottom: -20rpx;
		color: #d4d4d4;
	}

4.这一步就到了该写方法的时候了

const comfors = () => {
		if (valuemark) {
			active.background = "#33955f"
			setTimeout(() => {
				active.background = "#3eb575"
				showremark.value = false
			}, 150)

		}
	}
	const input = (e) => {
		console.log('输入内容：', e);
		// console.log('this.index.lenth', this.value.length)
		valuemark.value = e
		if (valuemark) {
			active.background = '#3eb575'
			active.color = '#ffffff'
		} else {
			active.background = '#f2f2f2'
			active.color = '#d4d4d4'
		}
	}
	const handleDelete= () => {
		styleDelete.background = '#f7f7f7'
		setTimeout(() => {
			styleDelete.background = '#ffffff'
		}, 150)
		if (nums) {
			nums.value = nums.value.substring(0, nums.value.length - 1)
		}
	}
	const changeNums = (item, index) => {
		console.log('asdsa', item, index);
		numbers.forEach((item, idx) => {
			if (idx === index) {
				item.background = '#f7f7f7';
				setTimeout(() => {
					item.background = '#ffffff';
				}, 150)
			}
		});

		sumindex.value = index
		console.log('this.sumindex', sumindex.value)
		if (item.text == '.') {
			console.log(nums.value.indexOf(".") != -1)

			if (nums.value.indexOf(".") != -1 || nums.value.length == 0) {
				return false
			}

		}
		if (nums.value.split('.') && nums.value.split('.')[1]) {
			if (nums.value.split('.')[1].length >= 2) {
				return false
			}
		}
		// this.nums.length
		console.log('this.nums.length', nums.value.length)

		nums.value = nums.value + item.text
		if (nums.value.length > 6) {
			nums.value = nums.value.slice(0, 6)
			uni.showToast({
				title: '最多只能输入6位数哦',
				icon: 'none'
			});
			return;
		}
	}
	const getListitemstyle = (index) => {
		return {
			background: numbers[index].background
		};
	}

希望可以帮助到漂泊在外的程序员们！！！

前端小菜菜夏最帅
关注
uniapp - [全端兼容] 手机数字键盘没有小数点，当 input 输入框的 type 属性设置 number 后，手机系统的软键盘无法输入小数点和符号问题（此方案 uniapp 全端全平台适用）
高级前端工程师
05-13 1万+
uniapp键盘无法输入小数点符号，uniapp键盘没有小数点，uniapp手机软键盘没有小数点，uniapp input设为number时键盘没有小数点，uniapp小程序调取数字键盘没有小数点解决办法，uniapp手机网页h5 安卓app 微信小程序 nvue解决键盘无法输入小数点的问题，uniapp苹果ios键盘上没小数点.怎么办，uniapp input number无法输入小数点，uniapp IOS数字键盘没有小数点，uniapp数字键盘为什么没有小数点，uniapp小程序app h5 inpu
uniapp(全端兼容) - 最新详细实现支付键盘功能组件，从底部弹出数字键盘输入支付密码进行付款交互效果，自定义支付密码键盘仿微信、支付宝支付键盘，1~9密码数字键盘，电商支付（详细示例代码复制运行
高级前端工程师
07-11 2164
uniapp，微信小程序，自定义数字键盘，输入支付密码的键盘组件，uniapp小程序如何实现从底部弹出输入支付密码自定义键盘功能，uniapp小程序密码支付键盘组件插件，自定义数字键盘输入页面，怎么封装底部弹窗自定义数字键盘用于输入支付密码，uniapp小程序仿类似电商支付密码输入模态框，uniapp微信小程序平台实现自定义支付密码键盘，uniapp 密码支付，数字键盘,安全键盘,交易键盘,交易密码,交易密码输入框，uniapp自定义支付键盘: uniapp自定义支付键盘，uniapp小程序端实现键盘输入支
【uniapp】uniapp实现input输入显示数字键盘：
SunPeng的博客
10-29 4264
【uniapp】uniapp实现input输入显示数字键盘：
vue3（1）虚拟数字键盘的封装，（2）以及子组件改变父组件变量的值进而使子组件实时响应值的变化，（3）子组件调用父组件中的方法（带参）
最新发布
bluejad的博客
08-01 263
【代码】vue3（1）虚拟数字键盘的封装，（2）以及子组件改变父组件变量的值进而使子组件实时响应值的变化，（3）子组件调用父组件中的方法（带参）
uniapp 自定义数字键盘
weixin_46997610的博客
07-05 1689
uniapp 自定义 数字键盘
uniapp踩坑之项目：uniapp数字键盘组件—APP端
意初的博客
11-03 898
uniapp数字键盘组件—APP端/在components文件夹创建digitKeyboard文件夹，再创建digitKeyboard.vue。// 数字键盘组件 在项目里main.js中配置如下代码。//main.js全局引入。
uniapp自建数字键盘
qq_40110189的博客
07-03 5806
uniapp自建数字键盘插件
前端歌谣-第一百一十课-Vue3实现简单数字键盘效果
qq_41632427的博客
02-28 641
大家好 我是歌谣 今天给大家带来vue3的功能关于键盘的实现。
uniapp:小程序数字键盘功能样式实现
m0_65069237的博客
03-10 1187
在uniapp中直接运行即可。
uniapp 基于 vue3 开发的【验证码输入框】
04-11
概要：uniapp 基于 vue3 开发的【验证码输入框】，输入值的输入框切换和光标是否自动聚焦等； 使用人群：使用 uniapp 基于 vue3 开发的应用，需要用到输入验证码； 使用场景：短信验证码登录、短信验证码验证身份、...
uniapp车牌输入 uni-plate-input-master_uniapp_uniapp车牌号_uniapp车牌输入_un
10-04
在本文中，我们将深入探讨如何在uni-app框架中实现车牌号输入功能，主要基于提供的标题“uniapp车牌输入 uni-plate-input-master_uniapp_uniapp车牌号_uniapp车牌输入_un”以及描述“uniapp中使用的车牌输入控件，弹...
vue数字虚拟键盘组件
08-10
A Vue component to num-keyboard 一个虚拟数字键盘插件
小程序和Vue+uniapp+unicloud培训课件
tigerhhzz的博客
02-27 942
小程序和Vue+uniapp+unicloud培训课件
Vue3数字输入框（InputNumber）
Mr Dear的博客
04-17 6873
通过鼠标或键盘，输入指定范围或格式的数值，支持：设置步长，整数或小数；设置数值精度；格式化展示；自定义最大最小值；添加前缀图标；禁用；总之，功能丰富，简单易用😁😁
自定义键盘支付：u-keyboard、u-message-input
sunluyi的博客
03-18 1912
<!-- 余额支付输入密码 --> <u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false" v-model="paypasswordShow" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @bac
vue3用Grid布局 写了一个数字输入小键盘
weixin_44495327的博客
07-02 689
console.log("等一个人 希望能等到 cj")
vue自定义数字键盘
m0_53912016的博客
03-10 4403
输入框快速调出数字键盘 <input type="tel" pattern="[0-9]*">或者 <input type="num" pattern="[0-9]*"> 自定义数字键盘 封装的插件
使用uniapp在列表渲染的数字键盘中给每个键位写入点击事件点击改变颜色0.15s后有还原成原来的颜色且不使用:class
m0_65069237的博客
09-14 462
再写数字键盘的时候遇到了一个问题就是我已经通过：calss渲染了不同键位的样式，但是点击键位为了和用户有交互，那么点击时改变颜色就显得比较重要了，但是以及使用了:class了在使用一次改变样式的话就是报错，所以这次改变键位样式且0.15s恢复的这个功能将不使用：class来实现使用:style来实现。使用uni-app编写一个列表渲染，其中包含三个元素，并实现点击其中一个元素时改变其颜色样式，同时不使用。主要是实现不使用：class的情况下也能实现盒子样式的改变。指令渲染列表，并为每个元素绑定单击事件。
uniapp + Vue3
09-06
uniapp是一个基于Vue.js的跨平台开发框架，而Vue3是Vue.js的最新版本。它们的结合可以带来更好的开发体验和性能优化。uniapp提供了导航栏双页切换的功能，而Vue3的Pinia框架则提供了参数输出和方法调用的功能，还支持模块化和持久化存储。如果您有关于uniapp和Vue3的使用问题，您可以查看uniapp官网获取更详细的信息和示例代码。uniapp在早期版本中开始支持Vue3的使用，并且从HBuilderX 3.2版本开始支持创建基于Vue3的uniapp项目。使用uniapp和Vue3开发项目的流程与常规的Vue3开发类似。您可以按照官方提供的升级指南和使用文档来进行开发。希望以上信息对您有所帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [uniapp+vue3+pinia框架（模块化+持久化存储）](https://download.csdn.net/download/qq_35079107/87910679)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [uniapp + vue3微信小程序开发（1）框架搭建](https://blog.csdn.net/qq_39404437/article/details/124345386)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [uniapp开发：uniapp之切换vue3，一直使用一直爽](https://blog.csdn.net/qq_42961150/article/details/121375073)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值