uniapp 实现多行文本框输入数字显示

在input框绑定一个@input 输入实时把字段数存下来显示

<template>
	<view class="invite-box">
		<view class="center-box">
			<view style="margin: 40rpx 0 16rpx 40rpx;">
				<text style="color: #FA3534;">*</text>
				<text class="title" v-if="type">回退理由</text>
				<text class="title" v-else>否决理由</text>
			</view>
			<view class="content">
				<u-input :clearable='isFlase' v-model="reviewData" type="textarea" height="200"
					placeholder-class="input_holder" @input="sumfontnum" maxlength="500"
					:placeholder="type?'请输入回退理由':'请输入否决理由'" />
				<view style="text-align: end;" class="input_holder"><text>{{fontNum}}</text>/500</view>
			</view>
			<view class="button-style">
				<view style="width: 50%;">
					<button class="cancel-button" @click="cancelReply">取消</button>
				</view>
				<view style="width: 50%;">
					<button class="agree-button" @click="agree">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goodsReview,
		transportationReview,
	} from "@/api/cargo.js";
	export default {
		props: {
			reviewType: String,
			taskId: String,
			taskType: String,
		},

		data() {
			return {
				reviewData: '',
				fontNum: 0,
				isFlase: false,
				type:true,// true是回退 false是否决
			}
		},
		mounted() {
			if(this.reviewType=='0'&&this.taskType=='1'){
				this.type=false;
			}
		},
		methods: {
			// 限制文本框字数
			sumfontnum(e) {
				this.fontNum = e.length
			},
			cancelReply() {
				this.$emit("close") // 关闭弹窗
			},
			agree() {
				const this_=this
				if (this_.reviewData.length == 0) {
					uni.showToast({
						title: "请填写原因",
						icon: "error"
					})
				} else {
					const data = {
						reviewReason: this_.reviewData,
						reviewType: this_.reviewType,
						taskId: this_.taskId
					}
					if (this_.taskType == 0) {
						goodsReview(data).then(res => {
							if (res.data.code == 200) {
								this_.$emit("success") // 关闭弹窗
							} else {
								uni.showToast({
									title: "审核失败",
									icon: "error"
								})
							}
						})
					} else {
						transportationReview(data).then(res => {
							if (res.data.code == 200) {
								this_.$emit("success") // 关闭弹窗
							} else {
								uni.showToast({
									title: "审核失败",
									icon: "error"
								})
							}
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	// 弹窗样式
	.invite-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;

		.center-box {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 670rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);

			.title {
				color: #3D3D3D;
				font-size: 28rpx;
			}

			.content {
				padding: 10rpx 40rpx 30rpx;

				// 输入框placeholder样式
				.input_holder {
					color: #D8D8D8;
				}
			}

			.button-style {
				display: flex;

				button {
					background-color: #fff;
					width: 335rpx;
					height: 100rpx;
				}

				.cancel-button {
					color: #999999;
				}

				.agree-button {
					color: #21A78A;
				}
			}
		}

	}
</style>