Vue中number类型input不支持maxlength，如何根据配置动态限制输入长度？

实现方案 #

因为原生type="number"的input元素不支持maxlength属性，所以需要通过监听输入事件手动截断内容实现长度限制，以下是适配你当前Vue写法的实现：

步骤1：给input绑定v-model和输入事件

<input 
  :type="passwordType().type"
  :maxlength="passwordType().length"
  v-model="passwordInput"
  @input="limitInputLength"
/>

注：passwordInput为你用来存储输入值的响应式变量，可根据实际业务替换成对应的变量名

步骤2：添加输入限制逻辑

在methods中新增处理方法：

methods: {
  limitInputLength() {
    const currentConfig = passwordType()
    // 先统一转成字符串处理
    let inputVal = this.passwordInput.toString()
    
    // 数字类型额外过滤非数字字符，避免输入e、+-等特殊符号
    if (currentConfig.type === 'number') {
      inputVal = inputVal.replace(/[^0-9]/g, '')
    }
    
    // 按配置的最大长度截断
    inputVal = inputVal.slice(0, currentConfig.length)
    
    // 回写值，数字类型转回Number格式
    this.passwordInput = currentConfig.type === 'number' ? Number(inputVal) : inputVal
  }
}

简化写法

如果逻辑简单不需要额外复用，可以直接写内联逻辑省去单独声明方法：

<input 
  :type="passwordType().type"
  :maxlength="passwordType().length"
  v-model="passwordInput"
  @input="passwordInput = passwordInput.toString().slice(0, passwordType().length)"
/>

内容的提问来源于stack exchange，提问作者Dave