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!