Cara untuk menyekat pemilih tarikh untuk hanya menerima nombor dan sempang, dan menyekat nilai lain dalam Vue

Question

Saya menggunakan pakej npm vue2-datepicker untuk mengendalikan tarikh. Input tarikh menerima semua huruf, nombor dan aksara khas. Tetapi saya mahu input hanya menerima nombor, tanda sempang dan garis miring. Saya boleh mencapai ini dengan mudah menggunakan input html biasa. Tetapi bagaimana untuk melaksanakannya dalam pemilih tarikh? Sebarang bantuan amatlah dihargai. Terima kasih terlebih dahulu

Pautan npm yang saya gunakan.

Menunjukkan imej medan input yang menerima nilai yang berbeza.

Berikut ialah teg dan atribut yang saya gunakan.

<tarikh-pemilih
          :tempat letak="fieldItem.name"
          v-model="fieldItem.value"
          format="MM-DD-YYYY"
          v-if="fieldItem.type == 'datePicker'"
          type="nombor"
        ></date-picker>

Answer 1

Anda boleh menggunakan slot skop untuk mencapai ini:

<date-picker
  format='MM-DD-YYYY'
  value-type='format'
  v-model='time'>
  <template #input='{ props, events }'>
    <input
      v-bind='props'
      v-on='events'>
  </template>
</date-picker>

Kini kami boleh memintas peristiwa input dan mengalih keluar aksara yang tidak diingini:

<date-picker
  format='MM-DD-YYYY'
  value-type='format'
  v-model='time'>
  <template #input='{ props, events }'>
  <input
    v-bind='props'
    v-on='{
      ...events,
      input: event => handleInput(event, events.input)
    }'>
  </template>
</date-picker>

...
  methods: {
    handleInput (event, update) {
      let value = event.target.value.replace(/[^0-9/-]/g, '')

      // 强制Vue在删除一些字符后刷新输入框
      this.$forceUpdate()

      // 将新值应用于让vue2-datepicker继续其流程
      update(value)
    }
  }
...

Contoh