对于el-input，直接显示输入长度提示并上色并不直接支持，但我们可以用一些技巧来模拟这一效果。而对于el-textarea，虽然它没有直接的计数提示，但可以通过类似的技巧添加。
对于el-input
<template>
<div class="input-with-counter">
<el-input
v-model="inputValue"
:maxlength="10"
placeholder="请输入内容"
></el-input>
<span class="counter red-counter">{{ inputValue.length }}/10</span>
</div>
</template>
<style scoped>
.input-with-counter {
display: inline-block;
position: relative;
}
.counter {
position: absolute;
right: 0;
bottom: 0;
color: red; /* 默认红色 */
}
.red-counter {
color: red;
}
</style>
<script>
export default {
data() {
return {
inputValue: '',
};
},
};
</script>
对于el-textarea
<template>
<div class="textarea-with-counter">
<el-textarea
v-model="textareaValue"
:rows="4"
:maxlength="100"
placeholder="请输入内容"
></el-textarea>
<span class="counter red-counter">{{ textareaValue.length }}/100</span>
</div>
</template>
<style scoped>
.textarea-with-counter {
position: relative;
}
.counter {
position: absolute;
bottom: -20px; /* 调整位置使其位于textarea下方 */
right: 0;
color: red; /* 默认红色 */
}
</style>
<script>
export default {
data() {
return {
textareaValue: '',
};
},
};
</script>
