antd vue 1.7.8版本使用表单输入框显示输入字数

效果图

在a-input标签下面加入一个sapn标签，并设置css样式定位

<template>
	<div style="width: 600px;">
		<a-form :form="form">
			<a-form-item label="书名:" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
				<a-input style="width: 100%" placeholder="请输入书名（限100字）" v-decorator="['bookName']" allowClear />
				<span class="text-count"> {{ form.getFieldValue("bookName") == null ? 0 : form.getFieldValue("bookName").length }}/100 </span>
			</a-form-item>

			<a-form-item label="描述:" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
				<a-textarea placeholder="请输入描述（限2000字）" v-decorator="['describe']" :auto-size="{ minRows: 2, maxRows: 5 }" allowClear />
				<span class="text-count textarea-count"> {{ form.getFieldValue("describe") == null ? 0 : form.getFieldValue("describe").length }}/2000 </span>
			</a-form-item>
		</a-form>
	</div>
</template>

<script>
	export default {
		name: "Vue2AntdFormView",

		data() {
			return {
				form: this.$form.createForm(this),
			};
		},

		mounted() {},

		methods: {},
	};
</script>

<style lang="less" scoped>
	.text-count {
		display: inline;
		position: relative;
		z-index: 10;
		background: transparent;
		float: right;
		top: -25px;
		right: 20px;
		color: #c5c8ce;
		margin: 0;
		padding: 0 3px;
		font-size: 14px;
		user-select: none;
		height: 0px;
	}

	.text-count::before {
		content: "";
		z-index: -1;
		display: block;
		position: absolute;
		top: 18px;
		left: 0;
		right: 0;
		height: 5px;
		background-color: #fff;
	}

	.textarea-count {
		top: -35px;
	}
</style>