element Input 输入框 输入长度限制 maxlength=“10“默认输入长度提示颜色为红色

对于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>