通过uniapp实现实时监控input框输入字数

运行效果：

由于源码比较长所以我写一个只争对这个功能的代码，就可以了。文章后面我会放源码的。

<template>
 <view>
  <input v-model="inputValue" maxlength="4" / >
  <view :style="{ color: isExceedLimit ? 'red' : 'black' }">{{ showCharacterCount }}</view>
 </view>
</template>

export default {
  data() {
    return {
      inputValue: '', 输入框的值
      isExceedLimit: false // 是否超过最大限制标志位
    };
  },
  computed: {
    showCharacterCount() {
      const count = this.inputValue.length;
      this.isExceedLimit = count > 3; // 如果字符数超过4，设置标志位为 true
      return `${count}/4`; // 展示输入到第几个字符
    }
  }
};

原理：通过v-model双向绑定inputvalue记录输入的值，在使用一个变量 isExceedLimit来判断是否超过了最大的限制标志位，通过computed监听inputvalue的变化。将inputValue.length的长度赋值给count，通过isExceedLimit = count，如果超过3，由于isExceedLimit时布尔类型，相等即为真为true，，可能大家有疑问为什么是大于3而不是4呢，因为记录inputvalue的值是从0开始的，0-3一共有4位所以实际就是判断4位字符了。步骤如下：

• 使用 v-model 指令，将输入框的值绑定到 inputValue 属性上；

• 使用计算属性 showCharacterCount 来计算输入的字符数，并展示在盒子中；

• 根据 isExceedLimit 的值来控制数字盒子的文字颜色，如果超过最大限制（4个字符），则设置为红色。

后面是源码：

这是一个自定义组件：

<template>
	<view class="content">
		<view @click="consoles" class="samsung">
			<image src="/static/Tall-Book-Images/exitright.png" mode="aspectFit" style="width: 50rpx; height: 50rpx; ">
			</image>
		</view>
		<view class="tilte">
			<view class="title-top">分类管理</view>
			<view class="title-bottom">长按拖动分类可排序，轻触你添加的分类可编辑。</view>
		</view>
		<view class="Classify">
			<view :class="[showCode ? 'Expenditurelv':'Expenditure']" @click="expendituer()">支出</view>
			<view :class="[showCodeR ? 'ExpenditureH':'Expenditure']" @click="ExpenditureH()">入账</view>
			<view :class="[showCodeL ? 'ExpenditureL': 'Expenditure']" @click="ExpenditureL()">不计入收支</view>
		</view>
		<view class="box">
			<view v-for="(item,index) in box" :key="index" class="box-mini" >
				<view class="img-box">
					<image :src="item.imgs" mode="aspectFit" style="width: 50rpx; height: 50rpx;">
					</image>
				</view>
				<view style="font-size: 28rpx;">{{item.name}}</view>
			</view>

			<view class="box-mini" :style="styleactive" @click="last()"> <!-- 添加-->
				<view class="img-boxone">
					<image src="/static/Tall-Book-Images/tianjia.png" mode="aspectFit" style="width: 80rpx; height: 80rpx;">
					</image>
				</view>
				<view style="font-size: 28rpx;">添加</view>
			</view>
		</view>

		<u-popup :show="showtype" mode="bottom" @close="close" @open="openss" round="10">
			<view style="width: 100%; height: 650rpx; ">
				<view class="top">
					<view class="window" @click="close()">
						<image src="/static/Tall-Book-Images/exitright.png" mode="aspectFit"
							style="width: 40rpx; height: 40rpx;"></image>
					</view>
					<view
						style=" font-size: 20px; text-align: center; line-height: 80rpx; width: 220rpx; height: 80rpx; position: absolute;top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
						添加分类
					</view>
				</view>
				<view class="center">
					<uni-easyinputs v-model="value" maxlength="4" @input="input"
						placeholder="不能与已有类型名重复"></uni-easyinputs>
					<view class="hint" :style="{color: isimit ? '#c90003' : '#c9c9c9'}">
						{{showCharacterCount}}
					</view>
				</view>
				<view class="bottom">
					<button class="comfors" :style="active" @click="comfors()">确定</button>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				styleactive: { //添加
					background: '',
				},
				active: {
					background: ' #f2f2f2',
					color: '#d4d4d4'
				},
				value: '',//输入框的值
				isimit:false,//是否超过了最大限制标志位
				activeindex: -1,
				showtype: false, //点开编辑
				showCode: true, //支出分类
				showCodeR: false, //入账分类
				showCodeL: false, //不计入收支
				box: [{
						name: '餐饮',
						imgs: '/static/Tall-Book-Images/cy1.png'
					},
					{
						name: '交通',
						imgs: '/static/Tall-Book-Images/jt1.png'
					},
					{
						name: '服饰',
						imgs: '/static/Tall-Book-Images/yf1.png'
					},
					{
						name: '购物',
						imgs: '/static/Tall-Book-Images/gw1.png'
					},
					{
						name: '服务',
						imgs: '/static/Tall-Book-Images/sd1.png'
					},
					{
						name: '教育',
						imgs: '/static/Tall-Book-Images/jy1.png'
					},
					{
						name: '娱乐',
						imgs: '/static/Tall-Book-Images/ht1.png'
					},
					{
						name: '运动',
						imgs: '/static/Tall-Book-Images/lq1.png'
					},
					{
						name: '生活缴费',
						imgs: '/static/Tall-Book-Images/fz1.png'
					},
					{
						name: '旅行',
						imgs: '/static/Tall-Book-Images/lx1.png'
					},
					{
						name: '宠物',
						imgs: '/static/Tall-Book-Images/cw1.png'
					},
					{
						name: '医疗',
						imgs: '/static/Tall-Book-Images/yl1.png'
					},
					{
						name: '保险',
						imgs: '/static/Tall-Book-Images/bx1s.png'
					},
					{
						name: '公益',
						imgs: '/static/Tall-Book-Images/xin1.png'
					},
					{
						name: '发红包',
						imgs: '/static/Tall-Book-Images/hb1.png'
					},
					{
						name: '转账',
						imgs: '/static/Tall-Book-Images/zz1.png'
					},
					{
						name: '亲属卡',
						imgs: '/static/Tall-Book-Images/yhk1.png'
					},
					{
						name: '其他人情',
						imgs: '/static/Tall-Book-Images/qtrq1.png'
					},
					{
						name: '其他',
						imgs: '/static/Tall-Book-Images/qt1.png'
					},
					{
						name: '退还',
						imgs: '/static/Tall-Book-Images/thsh1.png'
					}
				]

			}
		},
		computed:{
			showCharacterCount(){
				const count = this.value.length;
				this.isimit = count > 3
				return `${count}/${4}`
			}
		},
		methods: {
			input(e) {
				console.log('输入内容：', e);
				// console.log('this.index.lenth', this.value.length)
				this.value = e
				if (this.value) {
					this.active.background = '#3eb575'
					this.active.color = '#ffffff'
				} else {
					this.active.background = '#f2f2f2'
					this.active.color = '#d4d4d4'
				}
			},
			consoles() {
				this.$emit('updateList', {
					show: true,
					name: this.value,
					imgs: '/static/Tall-Book-Images/hb1.png'
				})
			},
			expendituer() { //点击支出
				this.showCode = true;
				this.showCodeL = false;
				this.showCodeR = false;
			},
			ExpenditureH() { //点击入账
				this.showCode = false;
				this.showCodeR = true;
				this.showCodeL = false;
			},
			ExpenditureL() { //点击不计入收支
				this.showCode = false;
				this.showCodeR = false;
				this.showCodeL = true;
			},
			close() {
				this.showtype = false //关闭弹窗
			},
			openss() {
				//弹出层退出
			},
			last(index) {
                this.styleactive.background="#dfdfdf"
				this.showtype = true //打开弹窗
				setTimeout(() => {
					this.styleactive.background="#ffffff"//样式改变后立马还原
				}, 150)
			},
			comfors() {
				if (this.value) {
					this.active.background = "#33955f"
					setTimeout(() => {
						this.active.background = "#3eb575"
					}, 150)
					const newItem = {
						name: this.value,
						imgs: '/static/Tall-Book-Images/hb1.png'
					}
					this.showtype = false
					this.box.push(newItem)
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.Classify {
		width: 100%;
		display: flex;
		height: 120rpx;
		margin-top: 10rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		align-items: center;
		margin-bottom: -12rpx;
		justify-content: flex-start;

	}

	.content {
		position: relative;
		width: 750rpx;
		height: 100%;
	}

	.samsung {
		position: absolute;
		width: auto;
		height: auto;
		top: 40rpx;
		left: 30rpx;
	}

	.tilte {
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		align-items: center;
		white-space: pre-wrap; //换行保留空格
		width: 90%;
		height: 350rpx;
		margin: 100rpx auto 0;
		// background-color: #c9c9c9;
	}

	.title-top {
		font-size: 42rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
	}

	.title-bottom {
		font-size: 34rpx;
		text-align: center;
		letter-spacing: 0.1em;
		line-height: 1.5em;
	}

	.Expenditurelv {
		width: auto;
		height: 60rpx;
		color: #3eb575;
		font-size: 32rpx;
		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: 32rpx;
		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: 32rpx;
		text-align: center;
		line-height: 60rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		background-color: #f1f3f6;
		padding: 0rpx 20rpx 0rpx 20rpx;

	}

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

	}

	.box {
		width: 100%;
		height: 500px;
		margin-top: 50rpx;
		display: flex;
		flex-wrap: wrap;
		overflow-y: auto;
	}

	.box-mini {
		display: flex;
		width: 120rpx;
		height: 160rpx;
		align-items: center;
		flex-flow: column wrap;
		justify-content: space-evenly;
		margin: 0 0rpx 40rpx 52rpx;
	}

	.activebox {
		background-color: #d4d4d4;
	}

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

	.img-boxone {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
	}

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

	.center {
		width: 100%;
		height: 30%;
		display: flex;
		position: relative;
		padding: 0 30rpx 0 30rpx;
		justify-content: center;
		align-items: center;
	}
	
	.hint{
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		right: 35px;
		width: 80rpx;
		height: 80rpx;
	}

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

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

	.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;
	}
</style>

这是他的父页面：

<template>
	<view>
		<view class="Classify">
			<view :class="[showCode ? 'Expenditurelv':'Expenditure']" @click="expendituer()">支出</view>
			<view :class="[showCodeR ? 'ExpenditureH':'Expenditure']" @click="ExpenditureH()">入账</view>
			<view :class="[showCodeL ? 'ExpenditureL': 'Expenditure']" @click="ExpenditureL()">不计入收支</view>
			<view class="Expendituretime" :style="timeColor" @click="time()">
				<view style="width: auto;height: 60rpx; ">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick"
						@change="change" />
				</view>
				<view
					style=" width: auto; height: 60rpx; display: flex; justify-content: center; align-items: center; ">
					<image src="/static/image/downward.png" mode="aspectFit"
						style="width: 30rpx; height: 30rpx;margin: 7rpx 0 0 4rpx"></image>
				</view>
			</view>
		</view>

		<view v-show="value == 0">
			<view class="money-input">

				<view class="input-container" @click="toggleBox">
					<view class="input-wrapper">
						<view class="input-iconone">
							<image src="/static/Tall-Book-Images/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="Type">
				<view class="Type-box" v-for="(item,index) in box " :key="index" @click="select(index)"
					:style="iphone(index)">
					<view class="inctiveclass" :class="{activeclass: activeIndex === index}">
						<image :src="item.showimg ? item.imgs : item.img" mode="aspectFit"
							style="width: 50rpx; height: 50rpx;"></image>
					</view>
					<view class="box-text" :class="[item.showimg? 'box-ative': 'box-text']">
						<view>{{item.name}}</view>
					</view>
				</view>

				<view class="Type-box" :class="{Typeboxactive: activeIndextype === true}">
					<view class="inctiveclass" :class="{activeclass: activeIndextype === true}" :style="styletype"
						@click="typepires">
						<image :src="imgsrc" mode="aspectFit" style="width: 50rpx; height: 50rpx;"></image>
					</view>
					<view
						style=" display: flex; color: #66789f; justify-content: flex-end; align-items: center; width: 100%; margin-top: 10rpx; height: 40rpx; text-align: center; font-size: 24rpx;">
						<view>分类管理</view>
						<image src="/static/Tall-Book-Images/exitone.png" mode="aspectFit"
							style="width: 20rpx; height: 20rpx;"></image>
					</view>
				</view>


			</view>
			<view class="remark">
				<view class="remarks" @click="remark()" :style="styleremark">
					添加备注
				</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="/static/Tall-Book-Images/qc.png" mode="aspectFit"
							style="width: 50rpx; height: 50rpx;"></image>
					</view>
					<view class="onerplus" @click="ok()" :style="stylelv">
						确认
					</view>
				</view>
			</view>

		</view>

		<view v-show="value == 1">
			<gold></gold>
		</view>

		<view v-show="value == 2">
			<gambridge></gambridge>
		</view>


		<u-popup :show="show" mode="right" @close="closeyoushow"><!--分类管理弹窗-->
			<typeexre @updateList="updateList"></typeexre>
		</u-popup>

		<u-popup round="10" :show="showremark" mode="bottom" @close="closeremark"><!--备注弹窗-->
			<remark @remarks="remarks"></remark>
		</u-popup>
	</view>
</template>

<script>
	// const d = new Date()
	// const year = d.getFullYear()
	// let month = d.getMonth() + 1
	// month = month < 10 ? `0${month}` : month
	// const date = d.getDate()
	import remark from '@/components/remark/remark.vue'
	export default {
		components: {
			remark
		},
		data() {
			return {
				stylecolor: {
					color: '#c7c7c7'
				},
				styletype: {
					background: '' //这是分类管理初始颜色
				},
				styleremark: {
					background: '' //这是备注初始颜色
				},
				styleos: {
					background: '#ffffff'
				},
				stylelv: {
					background: '#9cd7b7' //确认按钮颜色初始
				},
				single: '',
				nums: '',
				imgsrc: '/static/Tall-Book-Images/slh.png', //分类管理图片
				showBox: false, //是否显示‘|’
				activeIndextype: false, //这是判断是否改变分类管理圆中的样式
				showtime: false, //日历弹窗
				value: 0, //支出、入账、不计入收支改变颜色的初始值
				showCode: true, //支出分类
				showCodeR: false, //入账分类
				showCodeL: false, //不计入收支
				activeIndex: 0, //默认选中索引
				sumindex: -1, //数字键盘索引
				show: false, //分类管理弹窗开关
				showremark: false,//备注弹窗
				timeColor: {
					background: '#f7f7f7' //记一笔时间点击前颜色
				},
				model: {
					type: {
						time: '9月3日'
					}
				},
				boxIndex: '',
				box: [{
						name: '餐饮',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/cy.png',
						imgs: '/static/Tall-Book-Images/cy1.png',
						showimg: true,
						background: ''
					},
					{

						name: '交通',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/jt.png',
						imgs: '/static/Tall-Book-Images/jt1.png',
						showimg: false,
						background: ''
					},
					{

						name: '服饰',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/yf.png',
						imgs: '/static/Tall-Book-Images/yf1.png',
						showimg: false,
						background: ''
					},
					{

						name: '购物',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/gw.png',
						imgs: '/static/Tall-Book-Images/gw1.png',
						showimg: false,
						background: ''
					},
					{

						name: '服务',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/sd.png',
						imgs: '/static/Tall-Book-Images/sd1.png',
						showimg: false,
						background: ''
					},
					{

						name: '教育',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/jy.png',
						imgs: '/static/Tall-Book-Images/jy1.png',
						showimg: false,
						background: ''
					},
					{

						name: '娱乐',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/ht.png',
						imgs: '/static/Tall-Book-Images/ht1.png',
						showimg: false,
						background: ''
					},
					{

						name: '运动',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/lq.png',
						imgs: '/static/Tall-Book-Images/lq1.png',
						showimg: false,
						background: ''
					},
					{

						name: '生活缴费',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/fz.png',
						imgs: '/static/Tall-Book-Images/fz1.png',
						showimg: false,
						background: ''
					},
					{

						name: '旅行',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/lx.png',
						imgs: '/static/Tall-Book-Images/lx1.png',
						showimg: false,
						background: ''
					},
					{
						name: '宠物',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/cw.png',
						imgs: '/static/Tall-Book-Images/cw1.png',
						showimg: false,
						background: ''
					},
					{

						name: '医疗',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/yl.png',
						imgs: '/static/Tall-Book-Images/yl1.png',
						showimg: false,
						background: '',
						url: '/pages/Tall-Book/type/type'
					},
					{

						name: '保险',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/bxs.png',
						imgs: '/static/Tall-Book-Images/bx1s.png',
						showimg: false,
						background: '',
						url: '/pages/Tall-Book/type/type'
					},
					{
						name: '公益',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/xin.png',
						imgs: '/static/Tall-Book-Images/xin1.png',
						showimg: false,
						background: '',
						url: '/pages/Tall-Book/type/type'
					},
					{
						name: '发红包',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/hb.png',
						imgs: '/static/Tall-Book-Images/hb1.png',
						showimg: false,
						background: '',
						url: '/pages/Tall-Book/type/type'
					},
					{
						name: '转账',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/zz.png',
						imgs: '/static/Tall-Book-Images/zz1.png',
						showimg: false,
						background: '',
						url: '/pages/Tall-Book/type/type'
					},
					{
						name: '亲属卡',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/yhk.png',
						imgs: '/static/Tall-Book-Images/yhk1.png',
						showimg: false,
						background: '',
						url: '/pages/Tall-Book/type/type'
					},
					{
						name: '其他人情',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/qtrq.png',
						imgs: '/static/Tall-Book-Images/qtrq1.png',
						showimg: false,
						background: '',
						url: '/pages/Tall-Book/type/type'
					},
					{
						name: '其他',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/qt.png',
						imgs: '/static/Tall-Book-Images/qt1.png',
						showimg: false,
						background: '',
						url: '/pages/Tall-Book/type/type'
					},
					{
						name: '退还',
						avtive: 'activeclass',
						inctive: 'inctiveclass',
						img: '/static/Tall-Book-Images/thsh.png',
						imgs: '/static/Tall-Book-Images/thsh1.png',
						showimg: false,
						background: '',
						url: '/pages/Tall-Book/type/type'
					}

				],
				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: {
			ok() {
				let obj = {
					nums: this.nums,
					image: this.box[this.boxIndex || 0]
				}
				this.stylelv.background = '#3bab6f'
				setTimeout(() => {
					this.stylelv.background = '#9cd7b7'
				}, 150)
				uni.setStorageSync('aaa', obj)
				uni.getStorageSync('aaa')
				console.log(uni.getStorageSync('aaa'))
			},
			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)
					}
				});
				if (this.showBox == true) {

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

						if (this.nums.indexOf(".") != -1) {
							return false
						}

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

					this.nums = this.nums + item.text

				}

			},

			getListitemstyle(index) {
				return {
					background: this.numbers[index].background
				};
			},
			close() {
				this[`show${this.showtime}`] = false
			},

			confirm(e) {
				console.log(e);
				this.showtime = false

			},

			remark() {

				this.styleremark.background = '#cecece'
				setTimeout(() => {
					this.styleremark.background = '#ffffff'
					this.showremark = true
				}, 150)
			},

			select(index) {
				this.activeIndex = index
				console.log(index)
				this.box.forEach((item, i) => {
					if (i === index) {
						item.background = '#e5e5e5';
						setTimeout(() => {
							item.background = '';
						}, 150)
						item.showimg = true;
					} else {
						item.background = '';
						item.showimg = false;
					}
				});
			},
			iphone(index) {
				return {
					background: this.box[index].background
				};

			},

			time() {
				this.timeColor.background = '#dedede' //点击中记一笔时间的颜色
				setTimeout(() => {
					this.timeColor.background = '#f7f7f7' //点击后记一笔时间的颜色
				}, 200)
				this.showtime = true
			},

			expendituer() { //点击支出
				this.value = 0,
					console.log(this.value);
				this.showCode = true;
				this.showCodeL = false;
				this.showCodeR = false;
			},
			ExpenditureH() { //点击入账
				this.value = 1,
					console.log(this.value);
				this.showCode = false;
				this.showCodeR = true;
				this.showCodeL = false;
			},
			ExpenditureL() { //点击不计入收支
				this.value = 2,
					console.log(this.value);
				this.showCode = false;
				this.showCodeR = false;
				this.showCodeL = true;
			},

			// focusInput() {
			// 	// 点击输入框时触发的方法
			// 	// 可以在此方法中处理获取焦点、跳转到输入界面等逻辑
			// },

			toggleBox() {
				this.showBox = true //点击后输入框出现“|”每隔一段时间闪动
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			change(e) {
				this.single = e;
				console.log("-change事件:", e);
			},
			closeyoushow() {
				this.show = false
			}, //关闭分类弹窗
			closeremark() {
				this.showremark = false
			},
			updateList(val) {
				console.log('val', val)
				// this.show.Boolean(val)
				this.show = Boolean(!val)
				// console.log('this.show', this.show)
			},
			remarks(val) {
				console.log('com', val)
				this.showremark = Boolean(!val)
				console.log('this.showremark', this.show)
			},
			typepires() {
				this.activeIndextype = true
				this.show = true
				this.imgsrc = '/static/Tall-Book-Images/slh1.png'
				setTimeout(() => {
					this.imgsrc = '/static/Tall-Book-Images/slh.png'
					this.activeIndextype = false
				}, 1000)
			}
		},
	}
</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: #f7f7f7;

	}

	.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;
	}
</style>

里面的图片地址和不想关的自定义组件，图片可以使用自己写的地址，无关自定义组件删除即可。