Vue中如何限制vue2-datepicker输入框仅接收数字、连字符与正斜杠？

你可以通过以下两种方案实现仅允许输入数字、连字符、正斜杠的需求： #

方案一：输入内容实时过滤（代码改动最小） #

vue2-datepicker支持原生input事件监听，在事件回调中过滤掉不符合规则的字符即可：

1. 给组件新增@input事件绑定

<date-picker
  :placeholder="fieldItem.name"
  v-model="fieldItem.value"
  format="MM-DD-YYYY"
  v-if="fieldItem.type == 'datePicker'"
  type="number"
  @input="handleDateInput"
></date-picker>

2. 新增输入处理方法

methods: {
  handleDateInput(val) {
    // 正则匹配移除所有非数字、连字符、正斜杠的字符
    const filteredValue = val.replace(/[^0-9\-/]/g, '')
    if (filteredValue !== val) {
      this.fieldItem.value = filteredValue
    }
  }
}

方案二：自定义输入框插槽（和原生输入框限制效果完全一致） #

如果方案一存在输入回弹等兼容问题，可以用组件提供的输入框插槽，直接使用原生input实现限制：

1. 改写组件插槽代码

<date-picker
  v-model="fieldItem.value"
  format="MM-DD-YYYY"
  v-if="fieldItem.type == 'datePicker'"
>
  <template v-slot:input="{ inputProps, inputEvents }">
    <input
      v-bind="inputProps"
      v-on="inputEvents"
      :placeholder="fieldItem.name"
      pattern="[0-9\-/]*"
      @keydown="handleDateKeydown"
    >
  </template>
</date-picker>

2. 新增按键拦截方法

methods: {
  handleDateKeydown(e) {
    // 允许的按键：数字、指定符号、编辑快捷键、功能键
    const allowedKeys = ['0','1','2','3','4','5','6','7','8','9','-','/', 'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab']
    if (!allowedKeys.includes(e.key) && !e.ctrlKey && !e.metaKey) {
      e.preventDefault()
    }
  }
}

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