Cara klik kekunci Enter untuk log masuk terus dalam vue

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>

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>

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>

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!