Rumah  >  Soal Jawab  >  teks badan

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

<p>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</p> <p>Pautan npm yang saya gunakan. </p> <p>Menunjukkan imej medan input yang menerima nilai yang berbeza. </p> <p>Berikut ialah teg dan atribut yang saya gunakan. </p> <pre class="brush:php;toolbar:false;"><tarikh-pemilih :tempat letak="fieldItem.name" v-model="fieldItem.value" format="MM-DD-YYYY" v-if="fieldItem.type == 'datePicker'" type="nombor" ></date-picker></pre>
P粉729518806P粉729518806441 hari yang lalu611

membalas semua(1)saya akan balas

  • P粉023650014

    P粉0236500142023-08-27 00:21:48

    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

    balas
    0
  • Batalbalas