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

最新推荐文章于 2024-02-19 10:50:55 发布

[猫玖]

最新推荐文章于 2024-02-19 10:50:55 发布

阅读量888

点赞数 1

分类专栏： # Vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44828720/article/details/131959163

版权

Vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该文章展示了一个Vue2组件，使用AntDesignVue库创建表单。在a-input输入框下方添加了span标签来显示输入字数，通过CSS样式进行定位，并动态更新计数。示例包括书名和描述两个字段，分别限制为100字和2000字。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述
在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>