当前位置：首页 > 前端教程

elementui maxlength

2026-01-15 20:33:49前端教程

elementui maxlength 的使用方法

在 Element UI 中，maxlength 属性用于限制输入框（如 el-input）或文本域（如 el-input 类型为 textarea）的最大字符数。以下是具体的使用方式和注意事项。

基本用法

在 el-input 组件中，可以通过 maxlength 属性设置输入的最大字符数。该属性适用于普通输入框和文本域。

elementui maxlength

<el-input v-model="input" maxlength="10" show-word-limit></el-input>

maxlength="10"：限制输入框最多输入 10 个字符。
show-word-limit：显示当前输入的字符数和最大限制（如 "0/10"）。

文本域的使用

对于多行文本输入（textarea），可以通过设置 type="textarea" 并结合 maxlength 实现限制。

elementui maxlength

<el-input
  type="textarea"
  v-model="textarea"
  maxlength="100"
  show-word-limit
></el-input>

动态绑定

maxlength 可以通过动态绑定的方式设置，例如从数据或计算属性中获取值。

<el-input v-model="input" :maxlength="maxLength" show-word-limit></el-input>

data() {
  return {
    maxLength: 20
  };
}

注意事项

maxlength 计算的是字符数，而非字节数。如果需要限制字节数（如中文字符占 2 字节），需自定义校验逻辑。
show-word-limit 仅在输入内容时显示计数，不会阻止用户输入超过限制的字符（需通过表单验证或事件处理拦截）。

表单验证

结合 Element UI 的表单验证规则，可以确保输入内容不超过 maxlength。

<el-form :model="form" :rules="rules">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username" maxlength="10"></el-input>
  </el-form-item>
</el-form>

data() {
  return {
    form: { username: '' },
    rules: {
      username: [
        { max: 10, message: '长度不能超过 10 个字符', trigger: 'blur' }
      ]
    }
  };
}

通过以上方法，可以灵活使用 maxlength 实现输入长度的限制和提示。