首页 > 编程语言 >uniapp:小程序数字键盘功能样式实现

uniapp:小程序数字键盘功能样式实现

时间:2024-05-11 17:20:10浏览次数:22  
标签:flex uniapp center width 样式 数字键盘 height color background

查看代码
 <template>
	<view>
		<view>
			<view class="money-input">
				<view class="input-container" @click="toggleBox">
					<view class="input-wrapper">
						<view class="input-iconone">
							<image src="https://picture-warehouseone.oss-cn-beijing.aliyuncs.com/rmb.png" mode="aspectFit"
								style="width: 60rpx; height: 60rpx;"></image>
						</view>
						<view
							style="width: auto; height: 100%;line-height: 156rpx; padding-left: 80rpx; font-size: 80rpx; color: #333;">
							{{nums}}
						</view>
						<view class="input-icon" :class="{active: showBox}"></view>
					</view>
				</view>
			</view>
 
			<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="jianshao()" class="oner" :style="styleos">
						<image src="https://picture-warehouseone.oss-cn-beijing.aliyuncs.com/jianshao.png" mode="aspectFit"
							style="width: 50rpx; height: 50rpx;"></image>
							
					</view>
					<view class="onerplus" @click="ok()" :style="stylelv">
						确认
					</view>
				</view>
			</view>
 
		</view>
         
		 <view>{{sets}}</view>
	</view>
</template>
 
<script>
 
	export default {
		data() {
			return {
				active: {
					background: ' #f2f2f2',
					color: '#d4d4d4'
				}, //这是确定按钮的样式
				styleos: {
					background: '#ffffff' //这是确认的初始颜色
				},
				stylelv: {
					background: '#9cd7b7' //确认按钮颜色初始
				},
				nums: '',
				sets:this.set,//获取set中编辑数据
				isimit: false, //判断备注是否超过了最大限制标志位
				showBox: 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'
					},
 
 
				]
			}
		},
		created() {
			
		},
		methods: {
 
			comfors() {
				if (this.valuemark) {
					this.active.background = "#33955f"
					setTimeout(() => {
						this.active.background = "#3eb575"
						this.showremark = false
					}, 150)
 
				}
			},
			input(e) {
				console.log('输入内容:', e);
				// console.log('this.index.lenth', this.value.length)
				this.valuemark = e
				if (this.valuemark) {
					this.active.background = '#3eb575'
					this.active.color = '#ffffff'
				} else {
					this.active.background = '#f2f2f2'
					this.active.color = '#d4d4d4'
				}
			},
			ok() {
					this.stylelv.background = '#3bab6f'
					setTimeout(() => {
						this.stylelv.background = '#9cd7b7'
					}, 150)
			},
			jianshao() {
				this.styleos.background = '#f7f7f7'
				setTimeout(() => {
					this.styleos.background = '#ffffff'
				}, 150)
				if (this.nums) {
					this.nums = this.nums.substring(0, this.nums.length - 1)
				}
			},
			changeNums(item, index) {
				this.numbers.forEach((item, idx) => {
					if (idx === index) {
						item.background = '#f7f7f7';
						setTimeout(() => {
							item.background = '#ffffff';
						}, 150)
					}
				});
 
				this.sumindex = index
				// console.log('this.sumindex', this.sumindex)
				if (item.text == '.') {
					console.log(this.nums.indexOf(".") != -1)
 
					if (this.nums.indexOf(".") != -1 || this.nums.length == 0) {
						return false
					}
 
				}
				if (this.nums.split('.') && this.nums.split('.')[1]) {
					if (this.nums.split('.')[1].length >= 2) {
						return false
					}
				}
				// this.nums.length
				console.log('this.nums.length',this.nums.length)
				
				this.nums = this.nums + item.text
				if(this.nums.length >6){
					this.nums = this.nums.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;
 
	}
 
	.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中直接运行即可。运行效果:

标签:flex,uniapp,center,width,样式,数字键盘,height,color,background
From: https://www.cnblogs.com/panwudi/p/18186849

相关文章

  • uniapp 小程序 实现 vue 实现手写签名
    方法一<template><viewclass="signBox"><viewclass="topHint">请在下方空白书写区域内写出您的名字</view><viewclass="btn"><viewclass="saveBtn"@click="save"......
  • ElementUI——elementui重复引入样式
    前言按着文档操作后发现存在样式重复引入的问题,尝试了一系列的配置都未生效,最终是直接生成样式导入解决;文档:https://element.eleme.io/#/zh-CN/component/custom-theme#yin-ru-zi-ding-yi-zhu-ti工具:https://elementui.github.io/theme-chalk-preview/#/zh-CN内容使用工具生......
  • uniapp 周选择范围时间
      css使用点击查看下载css库css自定义的样式:/*亮高*/.box-blue{background-color:#409EFF;color:white;border-radius:10rpx;}/*中间连接背景颜色*/.bg-light-blue{width:80rpx;height:80rpx;background-color:#e7f2ff......
  • Ant Design Blazor Table 组件的 自定义分页样式, 显示全部记录数,ShowTotal
    在AntDesignBlazor中,Table 组件的 ShowTotal 属性是一个泛型属性,它可以是两种类型之一:Func<PaginationTotalContext,string> 或 RenderFragment<PaginationTotalContext>。这个属性用于定义如何显示表格数据的总条数。OneOf<T1,T2> 是一个特殊的类型,它表示这个......
  • vue学习--模板语法(四、属性样式绑定&流程语句)
    目录3.5属性绑定1.Vue如何动态处理属性?2.v-model的底层实现原理分析3.6样式处理1.class样式处理2.style样式处理3.7分支循环结构1.分支结构2.v-if与v-show区别3.循环结构3.5属性绑定1.Vue如何动态处理属性?v-bind指令用法<av-bind:href='url'>跳转</a>缩写形式<a......
  • uniapp 新建文件
    uniapp新建文件支持ios和androidfunctioncreateFile(bases64,item,savedFilePathOne){//请求文件系统plus.io.requestFileSystem(plus.io.PRIVATE_DOC,function(fs){//letstorageAddress=fs.root.toURL();//创建文件fs.root.getFile......
  • uniapp+vue H5页面实现微信公众号授权登录
    <template><viewclass="my-userinfo-container"><!--头像和昵称区域--><viewclass="top-box"><image:src="form.headimgurl"class="avatar"></image>......
  • 如何修改element-plus原有样式+解决冒泡带来的问题
    目录1.静态搭建2.修改element-plus原有样式3.问题4.实现代码需求:当我在取色器中选择好颜色后,把element-plus默认的.el-button--primary这个按钮的背景色(--el-button-bg-color)进行切换1.静态搭建<template><el-popoverplacement="bottom"title="主题设置":width="200"......
  • uniapp 编译成h5,返回上一页之后没有触发生命周期问题
    今天开发测试的时候,无意中发现点击分享链接进去登陆成功返回上一页的时候,页面直接空白了。刚开始的时候,就很奇怪,毕竟分享链接这个功能是好久之前的,不可能无缘无故的出问题来着。开始分析问题,查看网络请求,发现空白页面一个请求都没有发出,不寻常。猜测是不是哪里打了断点导致的。......
  • uniapp开发小程序引入vant
    1.安装#通过npm安装npmi@vant/weapp-S--production#通过yarn安装yarnadd@vant/weapp--production#安装0.x版本npmivant-weapp-S--production2.引入项目首先在项目根目录创建文件夹wxcomponents,然后在其中创建vant文件夹。把node_modules......