Bagaimana untuk mencetuskan kaedah fokus input dalam kaedah dalam Vue.js?
P粉702946921
P粉702946921 2023-10-29 23:56:42
0
2
629

Saya mempunyai input yang menggunakan acara berikut:

<b-nput
            class="input"
            id="link"
            v-model="link"
            placeholder="link"
            @focus="$event.target.select()"
          ></b-input>

Bagaimana saya menggunakan ini di dalam @focus="$event.target.select()" Acara:

Kaedah di atas menyalin nilai. Saya perlu mencetuskan acara fokus pemilihan di atas apabila pengguna mengklik salin Bagaimanakah ini boleh dilakukan dengan betul?

P粉702946921
P粉702946921

membalas semua(2)
P粉441076405

Disediakan 参考 untuk input anda:

<b-input
            class="input"
            id="link"
            v-model="link"
            placeholder="link"
            ref="theInput"
          ></b-input>

Kemudian di mana-mana dalam skrip komponen:

this.$refs['theInput'].focus();
P粉555696738

Tambah kaedah saved sebagai pengendali acara fokus:

@focus="saved"

Kaedah:

methods: {
  saved(event){ //the event is passed automatically as parameter
     event.target.select()
  }
}

Editor:

Cuba tambah ref pada elemen input

<b-input
          ref="input"
            class="input"
            id="link"
            v-model="link"
            placeholder="link"
         
            @focus="$event.target.select()"
          ></b-input>

Kemudian cetuskan fokus secara terprogram di dalam kaedah:

methods: {
      async copy(s) {
      await navigator.clipboard.writeText(s) 
      this.$refs.input.focus();
     ...
    }
}
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan