Cara menggunakan Vue untuk melaksanakan kesan kata laluan gerak isyarat

Cara menggunakan Vue untuk melaksanakan kesan khas kata laluan gerak isyarat

Pengenalan:
Dengan populariti aplikasi mudah alih, kata laluan gerak isyarat telah menjadi kaedah buka kunci biasa. Sebagai rangka kerja bahagian hadapan yang popular, Vue menyediakan operasi lapisan paparan yang mudah dan fungsi pengurusan keadaan, serta boleh menyokong pelaksanaan kata laluan gerak isyarat. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan kesan kata laluan gerak isyarat dan memberikan contoh kod terperinci.

1. Persediaan
Sebelum kita mula, kita perlu menyediakan persekitaran pembangunan Vue. Langkah-langkah khusus adalah seperti berikut:

1. Pasang Vue, anda boleh memasangnya melalui arahan npm install vue atau yarn add vue.
2. Buat projek Vue baharu Anda boleh menggunakan Vue CLI untuk menciptanya.
3. Masukkan direktori projek dan mulakan pelayan pembangunan Perintahnya ialah npm run serve atau yarn serve.

2. Laksanakan komponen kata laluan gerak isyarat

1. Buat komponen Vue bernama GesturePassword untuk melaksanakan kesan khas kata laluan gerak isyarat. Kodnya adalah seperti berikut:

<template>
  <div class="gesture-password">
    <div v-for="n in 9" :key="n" class="point" :class="{'point-selected': selectedPoints.includes(n)}" @touchstart="touchStart(n)" @touchmove="touchMove(n)" @touchend="touchEnd(n)"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedPoints: []
    };
  },
  methods: {
    touchStart(n) {
      this.selectedPoints = [n];
    },
    touchMove(n) {
      if (!this.selectedPoints.includes(n)) {
        this.selectedPoints.push(n);
      }
    },
    touchEnd() {
      // 处理手势密码结束事件
    }
  }
};
</script>

<style>
.gesture-password {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.point {
  flex-basis: 32%;
  height: 30%;
  margin: 5px;
  background-color: #ccc;
  border-radius: 50%;
}

.point-selected {
  background-color: #ff0000;
}
</style>

2. Dalam kod di atas, kami menggunakan arahan gelung v-for untuk menjana 9 mata, setiap titik mempunyai pendengar acara yang sepadan untuk mengendalikan peristiwa sentuhan kata laluan gerak isyarat. Gaya mata dikawal melalui pengikatan data dan pemaparan bersyarat, dan titik yang dipilih dipaparkan dalam warna merah.

3. Mengendalikan peristiwa tamat kata laluan gerak isyarat
Dalam kod di atas, kami hanya memproses peristiwa mula dan alih kata laluan gerak isyarat Kami juga perlu memproses peristiwa tamat kata laluan gerak isyarat dan mengesahkan kata laluan gerak isyarat. Kita boleh mengendalikan acara ini dengan memanggil fungsi panggil balik Contoh kod adalah seperti berikut:

1. Tambah panggilan balik atribut fungsi panggil balik dalam komponen GesturePassword:

props: {
  callback: {
    type: Function,
    required: true
  }
}

2. Panggil fungsi panggil balik dalam kaedah touchEnd dan lulus titik yang dipilih sebagai parameter Luluskannya:

touchEnd() {
  this.callback(this.selectedPoints);
}

3. Buat komponen Vue bernama Laman Utama untuk memaparkan hasil input kata laluan gerak isyarat dan mengendalikan logik pengesahan. Kodnya adalah seperti berikut:

<template>
  <div class="home">
    <gesture-password :callback="checkPassword"></gesture-password>
    <div v-if="password">
      <p>您输入的手势密码是：</p>
      <p>{{ password.join(', ') }}</p>
      <p>{{ message }}</p>
    </div>
  </div>
</template>

<script>
import GesturePassword from './components/GesturePassword.vue';

export default {
  components: {
    GesturePassword
  },
  data() {
    return {
      password: null,
      message: ''
    };
  },
  methods: {
    checkPassword(selectedPoints) {
      if (selectedPoints.length < 4) {
        this.password = null;
        this.message = '手势密码长度不能少于4个点！';
      } else {
        this.password = selectedPoints;
        this.message = '手势密码验证通过！';
      }
    }
  }
};
</script>

<style>
.home {
  text-align: center;
  margin: 100px auto;
}
</style>

4. Menjalankan dan menguji

1. Jalankan npm run serve dalam baris arahan untuk memulakan pelayan pembangunan.
2. Buka http://localhost:8080/ dalam penyemak imbas, dan anda akan melihat antara muka yang serupa dengan grid sembilan persegi.
3. Cuba luncurkan jari anda dalam grid sembilan persegi dan perhatikan perubahan warna titik yang dipilih.
4. Apabila jari anda dinaikkan, hasil input kata laluan gerak isyarat akan dipaparkan pada halaman web dan pengesahan yang sepadan akan dilakukan.

Kesimpulan:
Artikel ini memperkenalkan cara menggunakan Vue untuk melaksanakan kesan kata laluan gerak isyarat dan menyediakan contoh kod terperinci. Dengan menyesuaikan komponen Vue untuk mengendalikan peristiwa sentuhan dan logik pengesahan, kami boleh melaksanakan fungsi kata laluan gerak isyarat dengan mudah. Pembaca boleh mengubah suai dan mengembangkannya mengikut keperluan mereka sendiri untuk mencapai kesan kata laluan gerak isyarat yang lebih kompleks.

Atas ialah kandungan terperinci Cara menggunakan Vue untuk melaksanakan kesan kata laluan gerak isyarat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!