Cara klik kekunci Enter untuk log masuk terus dalam vue

王林
Lepaskan: 2023-05-11 11:01:07
asal
2702 orang telah melayarinya

Vue.js ialah rangka kerja JavaScript progresif untuk membina antara muka pengguna. Sebagai alat, Vue.js lebih fleksibel dan boleh digunakan bukan sahaja untuk tapak web PC tetapi juga untuk pembangunan aplikasi mudah alih. Dalam banyak senario, kami perlu membenarkan pengguna log masuk melalui borang pada halaman. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue.js untuk melaksanakan kekunci masukkan untuk log masuk terus.

1. Pelaksanaan kod asas

Pertama, kami memerlukan kotak input dan butang log masuk Contoh kod adalah seperti berikut:

<template>
  <div>
    <input v-model="username" type="text" placeholder="请输入用户名">
    <input v-model="password" type="password" placeholder="请输入密码" @keyup.enter="login">
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      // 登录操作
    }
  }
}
</script>
Salin selepas log masuk

Antaranya, v-model. arahan digunakan untuk pengikatan dua hala Tetapkan nilai kotak input, @keyup.enter acara memantau kekunci masukkan, @click acara memantau klik tetikus dan login ialah fungsi log masuk.

Dalam templat, kami mengikat acara kekunci enter pada kotak input dan menambah acara klik pada butang log masuk secara serentak. Dalam acara masukkan kotak input, fungsi log masuk dipanggil terus untuk melengkapkan operasi log masuk semasa.

2. Halang penyerahan berulang

Kita boleh menggunakan @click.prevent dan @keyup.enter.prevent pada butang log masuk dan masukkan peristiwa penting untuk menghalang berbilang penyerahan dan mengelakkan operasi berulang. Seperti berikut:

<template>
  <div>
    <input v-model="username" type="text" placeholder="请输入用户名">
    <input v-model="password" type="password" placeholder="请输入密码" @keyup.enter.prevent="login">
    <button @click.prevent="login">登录</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: '',
      isSubmitting: false,
    }
  },
  methods: {
    login () {
      if(this.isSubmitting) return;
      
      this.isSubmiting = true;
      // 登录操作
      
      this.isSubmitting = false;
    }
  }
}
</script>
Salin selepas log masuk

Tambahkan atribut isSubmitting pada data untuk menentukan sama ada borang sedang diserahkan. Semak sama ada atribut ini benar apabila memanggil fungsi log masuk Jika ia benar, kembalikannya secara langsung, mengelakkan penyerahan borang berulang dan memastikan pengalaman pengguna biasa.

3. Fokus papan kekunci

Apabila terdapat berbilang kotak input dalam borang, kami memerlukan kaedah untuk menentukan kotak input mana pengguna berada. Anda boleh mendapatkan fokus papan kekunci elemen menggunakan atribut ref yang disediakan oleh Vue.js. Seperti berikut:

<template>
  <div>
    <input v-model="username" type="text" placeholder="请输入用户名" ref="usernameInput">
    <input v-model="password" type="password" placeholder="请输入密码" @keyup.enter.prevent="submit" ref="passwordInput">
    <button @click.prevent="submit">登录</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: '',
      isSubmitting: false,
    }
  },
  methods: {
    submit () {
      if(this.isSubmitting) return;
      
      this.isSubmiting = true;
      // 登录操作
  
      this.isSubmitting = false;
    }
  },
  mounted() {
    this.$refs.usernameInput.$el.focus();
  }
}
</script>
Salin selepas log masuk

Dalam kitaran hayat mounted, kami menggunakan atribut $refs untuk mendapatkan elemen DOM kotak input dan menggunakan kaedah focus untuk menetapkan fokus papan kekunci kepada yang pertama kotak input.

4. Ringkasan

Melalui amalan di atas, kami telah mempelajari cara menggunakan Vue.js untuk melaksanakan fungsi log masuk terus dengan kekunci masukkan, dan menggunakan pemprosesan dan pengoptimuman untuk mengelakkan penyerahan berulang dan pengalaman pengguna fokus papan kekunci. Sebahagian daripada kod pelaksanaan juga diberikan dalam contoh kod, saya harap ia akan membantu anda.

Atas ialah kandungan terperinci Cara klik kekunci Enter untuk log masuk terus dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan