uniapp使用easyinput文本框显示输入的字数和限制的字数

uniapp使用easyinput文本框显示输入的字数和限制的字数

先上效果图：

整体代码如下：

<template>
	<view class="nameInfoContent">
		<uni-easyinput class="uni-mt-5" suffixIcon="checkmarkempty" v-model="memberName" placeholder="请输入新昵称"
			maxlength="24" @iconClick="submit" @input="handleInput"></uni-easyinput>
		<view class="wordsNum">
			<view class="tipLips">支持2-24位中英文数字，符号-和_</view>
			<view class="juedui">{{ inputValueLength ? inputValueLength : 0  }}/24 </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				memberName: '',
				inputValueLength: ''
			}
		},
		methods: {
			handleInput(e) {
				this.inputValueLength = parseInt(e.length);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nameInfoContent {
		position: relative;
		padding: 32rpx;
		min-height: calc(100vh - 152rpx);

		.wordsNum {
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;

			.tipLips,
			.juedui {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
</style>

Live life to the fullest by drawing on your strengths.