Vue.js项目中如何让v-text-field支持输入HH:MM:SS格式时间

你可以通过格式校验+输入自动格式化的组合配置实现需求，修改后的组件代码如下：

<v-text-field
  filled
  rounded
  dense
  class="rounded-0"
  name="projectTime"
  placeholder="HH:MM:SS"
  v-model="entryEditForm.projectTime"
  type="tel"
  counter="8"
  :rules="[
    v => !!v || '请输入任务耗时',
    v => /^([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$/.test(v) || '格式必须为HH:MM:SS，取值范围00:00:00~23:59:59'
  ]"
  @input="formatTime"
></v-text-field>

对应的处理逻辑放在Vue的methods配置项中即可：

methods: {
  formatTime(value) {
    // 过滤所有非数字字符
    let num = value.replace(/\D/g, '')
    // 按位数自动插入冒号
    if (num.length >= 2) num = num.slice(0,2) + ':' + num.slice(2)
    if (num.length >= 5) num = num.slice(0,5) + ':' + num.slice(5,7)
    // 赋值给绑定变量
    this.entryEditForm.projectTime = num
  }
}

配置说明 #

• 把type设为tel是为了移动端弹出数字键盘，降低用户输入成本
• rules里的正则会严格校验输入格式是否符合要求，表单提交时会自动拦截不符合规则的内容
• formatTime方法会自动插入冒号，用户不需要手动输入符号，只需要连续输入6位数字即可自动生成目标格式

如果不需要自动补全冒号，只保留格式校验的话，删掉@input绑定和对应的方法，只保留rules配置即可，用户手动输入的内容不符合规则时会直接展示校验提示。

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