element input输入框显示输入字数

最新推荐文章于 2024-05-09 11:29:58 发布

flower`

最新推荐文章于 2024-05-09 11:29:58 发布

阅读量1.1k

点赞数 9

文章标签：开发语言 elementui

本文链接：https://blog.csdn.net/weixin_48929505/article/details/135343344

版权

实现方式一

在这里插入图片描述

适用场景：文本框，文本域显示输入字符串长度，超出指定长度字符串截取
实现方法：minlength与 maxlength 设置输入最小字符串长度与最大输入字符串长度，再使用 show-word-limit属性显示输入字数统计功能即可
代码片段

// An highlighted block
<template>
 <div>
 	<el-form ref="form" :model="form" :rules="rules">
 	  	<el-form-item label="" prop="baseName">
			<el-form-item label="" prop="baseName">
				<el-col :span="18">
					<el-input  placeholder="请输入名称(不超过20个字符)" minlength="1"  maxlength="20" v-model="form.baseName" show-word-limit>		
					</el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="" prop="baseDesc" style="margin-top: 20px;">
				<el-col :span="18">
					<el-input  placeholder="请输入描述(不超过30个字符)" type="textarea" v-model="form.baseDesc" minlength="1" maxlength="30"    show-word-limit rows="3">
					</el-input>
					</el-col>
			</el-form-item>
		</el-form-item>
 	</el-form
 </div>
</template>
<script>
export default {
data() {
return {
   form: {
		baseName: "",
		baseDesc: ""
	},
	rules: {
	 	baseName: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}],
		baseDesc: [{
						required: true,
						message: '请输入描述',
						trigger: 'blur'
					}],
	}
  }
 }
}
</script>

实现方式二

在这里插入图片描述

适用场景：文本框，文本域显示输入字符串长度，超出指定长度后输入字符串长度为红色，不截取
实现方法：文本框使用 slot属性为"suffix" 的复合型输入框实现，文本域使用position: relative;定位将字数大小内容定位到文本域

// An highlighted block
<template>
 <div>
 	<el-form ref="form" :model="form" :rules="rules">
	    <el-form-item label="" prop="baseName">
			<el-col :span="18">
				<el-input  placeholder="请输入名称(不超过20个字符)"   v-model="form.baseName" >		
					<div slot="suffix" style="font-size: 14px;height:24px;color: grey;font-size: 12px;">
						<span style=" background-color: #fff;padding-left: 15px;"
							:style="form.baseName.length>20?'color:red':''">{{form.baseName.length}}</span>/20
					</div>
				</el-input>
			</el-col>
		</el-form-item>
		<el-form-item label="" prop="baseDesc" style="margin-top: 20px;">
			<el-col :span="18">
				<div style="position: relative;">
				  <el-input  placeholder="请输入描述(不超过30个字符)" type="textarea" v-model="form.baseDesc"  rows="3">
				   </el-input>
				<span
						style="position: absolute;right: 10px;padding-bottom: 5px;  bottom: 2px;color: grey; background-color: #fff; line-height: 0;font-size: 12px;">
						<span style="line-height: normal;"
							:style="form.baseDesc.length>160?'color:red':''">{{form.baseDesc.length}}</span>
						<span style="line-height: normal;">/160</span>
					</span>
				</div>
				</el-col>
		</el-form-item>
 	</el-form
 </div>
</template>
<script>
export default {
data() {
return {
   form: {
		baseName: "",
		baseDesc: ""
	},
	rules: {
	 	baseName: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}, {
						min: 1,
						max: 20,
						message: '长度不能超过20个字符',
						trigger: 'blur'
					}],
		baseDesc: [{
						required: true,
						message: '请输入描述',
						trigger: 'blur'
					}, {
						min: 1,
						max: 160,
						message: '长度不能超过160个字符',
						trigger: 'blur'
					}],
	}
  }
 }
}
</script>