vue组件-金额设置数字键盘

最新推荐文章于 2025-04-06 12:41:37 发布
最新推荐文章于 2025-04-06 12:41:37 发布
阅读量219 收藏
点赞数 2
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_55565579/article/details/145931410

1.直接看效果图
2.将图标换成自己项目目录的
最终效果

<template>
	<view>
		<view class="money-input">
			<view class="input-container" @click="toggleBox">
				<view class="input-wrapper">
					<view class="input-iconone">
						<image src="/static/images/monty.png" mode="aspectFit" style="width: 60rpx; height: 60rpx;">
						</image>
					</view>
					<view
						style="width: auto; height: 100%;line-height: 156rpx; padding-left: 50rpx; font-size: 80rpx; color: #333;">
						{{amount}}
					</view>
					<view class="input-icon" :class="{active: showBox}"></view>
				</view>
			</view>
		</view>

		<view class="container" style="">
			<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="delNumber()" class="oner" :style="styleos">
						<image src="/static/deIimage/numberDel.png" mode="aspectFit"
							style="width: 50rpx; height: 50rpx;"></image>
					</view>
					<view class="onerplus" @click="submit()" :style="stylelv">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			showBox: {
				typeof: Boolean,
				default: true
			},
		},
		data() {
			return {
				amount: '',
				active: {
					background: ' #f2f2f2',
					color: '#d4d4d4'
				}, //这是确定按钮的样式
				styleos: {
					background: '#ffffff' //这是确认的初始颜色
				},
				stylelv: {
					background: '#9cd7b7' //确认按钮颜色初始
				},
				isimit: false, //判断备注是否超过了最大限制标志位
				
				activeIndex: 0, //默认选中索引
				sumindex: -1, //数字键盘索引
				numbers: [
					{
						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'
					},
				]
			}
		},
		methods: {
			comfors() {
				if (this.valuemark) {
					this.active.background = "#33955f"
					setTimeout(() => {
						this.active.background = "#3eb575"
						this.showremark = false
					}, 150)

				}
			},
			input(e) {
				this.valuemark = e
				if (this.valuemark) {
					this.active.background = '#3eb575'
					this.active.color = '#ffffff'
				} else {
					this.active.background = '#f2f2f2'
					this.active.color = '#d4d4d4'
				}
			},
			submit() {
				this.stylelv.background = '#3bab6f'
				setTimeout(() => {
					this.stylelv.background = '#9cd7b7'
				}, 150)
				this.$emit("getAmount", parseFloat(this.amount))
			},
			delNumber() {
				//删除
				this.styleos.background = '#f7f7f7'
				setTimeout(() => {
					this.styleos.background = '#ffffff'
				}, 150)
				if (this.amount) {
					this.amount = this.amount.substring(0, this.amount.length - 1)
				}
				if (!this.amount) {
					this.stylelv.background = '#9cd7b7'
				}
			},
			changeNums(item, index) {
				//输入时判断
				if (this.amount.length >= 0) {
					this.stylelv.background = '#3bab6f'
				} else {
					this.stylelv.background = '#9cd7b7'
				}

				this.numbers.forEach((item, idx) => {
					if (idx === index) {
						item.background = '#f7f7f7';
						setTimeout(() => {
							item.background = '#ffffff';
						}, 150)
					}
				});

				this.sumindex = index
				if (item.text == '.') {
					if (this.amount.indexOf(".") != -1 || this.amount.length == 0) {
						return false
					}

				}
				if (this.amount.split('.') && this.amount.split('.')[1]) {
					if (this.amount.split('.')[1].length >= 2) {
						return false
					}
				}
				this.amount = this.amount + item.text
				if (this.amount.length > 6) {
					this.amount = this.amount.slice(0, 6)
					uni.showToast({
						title: '最多只能输入6位数哦',
						icon: 'none'
					});
					return;
				}
			},

			getListitemstyle(index) {
				return {
					background: this.numbers[index].background
				};
			},
			toggleBox() {
				this.showBox = true //点击后输入框出现“|”每隔一段时间闪动
			},
		}
	}
</script>

<style lang="scss" scoped>
	.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;

	}

	.numbers {
		width: 100%;
		display: flex;
		height: 480rpx;
		margin-top: 10rpx;
		background-color: #fafafa;
		justify-content: flex-start;
		position: absolute;
		/* 设置为绝对定位 */
		bottom: 0;
		/* 固定在底部 */
	}

	.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;
		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;
	}
</style>
小飝吶
关注
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
uni-app 项目（关于自定义数字键盘组件）
Gao_Chuanhui的博客
03-23 1840
业务需求：金额，数字可以进行修改，自定义数字键盘组件，输入数字的同时可以显示正在修改的项目以及输入的数字大小 页面： 封装组件：component/kx-numberKey/kx-numberKey.vue UI部分： <template> <view name='kxNumKey'> <--本质还是引入Uni-popup组件--> <uni-popup ref="popup" type="bottom"> <view class="kx
uniapp:小程序数字键盘功能样式实现
m0_65069237的博客
03-10 1488
在uniapp中直接运行即可。
【uniapp】uniapp实现input输入显示数字键盘：
SunPeng的博客
10-29 5392
【uniapp】uniapp实现input输入显示数字键盘：
uniapp自建数字键盘
qq_40110189的博客
07-03 6290
uniapp自建数字键盘插件
uniapp+vue3实现数字键盘
weixin_57986195的博客
06-14 844
本文章是uniapp+vue3实现的数字键盘，希望可以帮助到漂泊在外的程序员们！
vue-number-keyboard是基于VUE实现的数字键盘插件，当前支持整数、
09-01
vue-number-keyboard是一个基于Vue.js框架开发的数字键盘插件，它的设计初衷是为了在Web前端开发中提供一个简洁、易用的数字输入界面。这款插件的主要特点在于其对整数和小数输入的支持，它能够让开发者轻松集成一个...
使用Vue自定义数字键盘组件(体验度极好)
08-28
"使用Vue自定义数字键盘组件，提高用户体验" 在 Vue 开发中，输入金额是一种常见的交互场景。然而，用原生的 input 进行金额输入体验很不好。为了提高用户体验，小编使用 Vue 自定义了数字键盘组件。本文将详细介绍...
vue功能-数字键盘
一入前端深似海
07-04 4860
vue项目pc端中，有的触摸屏页面需要JS封装键盘，如下就是全部代码~ 1.首先是封装的键盘组件 <template> <div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> <p v-for="keys in keyList"> <templ...
前端框架_Vue_数字键盘_金额输入组件_1744038616.zip
最新发布
04-08
这次分享的前端框架_Vue_数字键盘_金额输入组件，即是一个专门为Vue.js框架设计的自定义金额输入键盘组件。 数字键盘组件的开发通常需要考虑到用户体验、兼容性和安全性等多方面因素。在用户体验方面，设计师和开发...
uniapp踩坑之项目：uniapp数字键盘组件—APP端
意初的博客
11-03 1088
uniapp数字键盘组件—APP端/在components文件夹创建digitKeyboard文件夹，再创建digitKeyboard.vue。// 数字键盘组件 在项目里main.js中配置如下代码。//main.js全局引入。
uniapp 自定义数字键盘
weixin_46997610的博客
07-05 1866
uniapp 自定义 数字键盘
微信小程序数字键盘（仿微信转账键盘）
ZionHH的博客
07-26 3824
微信小程序数字键盘（仿微信转账键盘）
使用uniapp在列表渲染的数字键盘中给每个键位写入点击事件点击改变颜色0.15s后有还原成原来的颜色且不使用:class
m0_65069237的博客
09-14 531
再写数字键盘的时候遇到了一个问题就是我已经通过：calss渲染了不同键位的样式，但是点击键位为了和用户有交互，那么点击时改变颜色就显得比较重要了，但是以及使用了:class了在使用一次改变样式的话就是报错，所以这次改变键位样式且0.15s恢复的这个功能将不使用：class来实现使用:style来实现。使用uni-app编写一个列表渲染，其中包含三个元素，并实现点击其中一个元素时改变其颜色样式，同时不使用。主要是实现不使用：class的情况下也能实现盒子样式的改变。指令渲染列表，并为每个元素绑定单击事件。
uniapp自定义密码输入键盘-数字键盘效果demoUI方法二（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-09 1351
uniapp自定义密码输入键盘-数字键盘效果demoUI方法二
uni-app 实现6位数字密码键盘页面
weixin_42028153的博客
04-21 1220
【代码】uni-app 实现6位数字密码键盘页面。
uniapp 键盘组件
wofamaole的博客
04-06 427
数字键盘，为了应对uniapp的键盘样式无法自定义和无法对输出值进行拦截而封装，并且实现1. 有遮挡就上推，没遮挡就不上推；2. 精准上推。建议配合数字输入框一起使用。
uniapp ios 调数字键盘
IT_iosers的博客
07-12 1293
<input type=”number” pattern=”[0-9]*”>
Vue自定义数字键盘组件实现与体验分享
最后，为了使组件可复用，可以将其封装为一个Vue组件，通过props接收外部传入的参数，如初始值、最大值、小数位数限制等，并通过事件（如`input`或`blur`）向父组件传递输入值的变化。 总结起来，创建一个Vue自定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值