如何在Quasar的q-input组件中仅允许输入4位数字？

要实现仅允许输入4位数字的限制，仅靠:rules无法满足需求——因为rules只是验证逻辑，只能在输入完成后提示错误，无法实时阻止不符合要求的输入。以下是两种直接有效的实现方式：

方式1：使用Quasar内置的mask属性 #

Quasar的q-input支持mask属性，可以直接限制输入格式，非常适合这种固定长度的数字输入场景：

<q-input
  dense
  type="text"
  mask="####"
  class="q-mx-lg q-mb-lg"
  :input-style="{ fontSize:'30px', letterSpacing: '25px', textAlign:'center' }"
  v-model="pin"
  style="width: 40%; border: none; border-bottom: 2px solid #B157AE;"
/>

• 把type改为text（mask和type="number"配合时可能出现兼容性问题），如果需要最终值是数字，可在提交时用parseInt(pin)转换。
• mask="####"表示仅允许输入4位数字，输入过程中会自动限制长度和字符类型。

方式2：监听input事件手动过滤 #

如果需要保留type="number"，可以通过监听input事件，手动过滤输入内容：

<q-input
  dense
  type="number"
  class="q-mx-lg q-mb-lg"
  :input-style="{ fontSize:'30px', letterSpacing: '25px', textAlign:'center' }"
  v-model="pin"
  style="width: 40%; border: none; border-bottom: 2px solid #B157AE;"
  @input="handlePinInput"
/>

在脚本部分添加处理函数：

methods: {
  handlePinInput() {
    // 仅保留数字，且长度不超过4位
    this.pin = this.pin?.toString().replace(/\D/g, '').slice(0, 4)
  }
}

• 先把值转为字符串，用正则去掉非数字字符，再截取前4位，确保输入始终符合要求。
• 因为type="number"绑定的pin可能是数字类型，所以需要先转字符串处理。

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