Masalah: Acara @mouse-down Vue tidak dicetuskan

Question

Saya baru dalam pembangunan web dan saya menghadapi masalah berurusan dengan vue. Dari tutorial saya belajar bahawa anda boleh menggunakan @click apabila butang ditekan. Ia berfungsi dengan baik.

Sekarang saya ingin membuat ukuran mudah yang mengesan tekanan dan angkat tetikus untuk mengembangkan lagi pengesan klik dua kali dan tekan lama (saya juga mendapati bahawa saya boleh menggunakan @double-click, tetapi atas sebab yang tidak diketahui ia tidak berfungsi sama ada ). Bolehkah anda menjelaskan apa yang saya lakukan salah?

Nota: Saya tahu terdapat banyak pakej yang menangani masalah ini, tetapi saya ingin menjadikannya mudah jika boleh.

<script>
export default {
  data() {
    return {
      counter: 0,
    }
  },
  methods: {
    greet(event) {
      this.counter = 2
    }
  }
}
</script>

<template>
  <button @mouse-down="greet">问候 {{ counter }}</button>
</template>

Answer 1

Nama acara ialah "@mousedown" bukannya "@mouse-down"

<button @mousedown="greet">问候 {{ counter }}</button>

Tetapi kendalikan acara ini dengan berhati-hati. Ia mengendalikan semua butang tetikus (kiri, tengah, kanan) dan dipanggil apabila salah satu daripadanya ditekan.

Untuk mengendalikan acara dengan hanya satu butang ditekan, anda harus menggunakan pengubah suai ".kiri" atau ".kanan".

Contohnya:

<button @mousedown.left="greet">问候 {{ counter }}</button>

Ia hanya akan diproses apabila butang kiri ditekan.