Bagaimana untuk melaksanakan kesan tekan lama tetikus dalam Vue?

Vue ialah rangka kerja bahagian hadapan yang sangat popular, dan semasa proses pembangunan, beberapa kesan interaksi pengguna biasa sering terlibat, seperti kesan tekan lama tetikus. Dalam Vue, kita boleh mencapai kesan tekan lama tetikus melalui beberapa kaedah mudah Biar saya bercakap tentang operasi khusus di bawah.

Langkah pertama ialah menambah acara turun tetikus dalam komponen Vue dan tentukan pemasa boleh ubah di dalamnya untuk merekodkan masa apabila tetikus ditekan:

<template>
  <div @mousedown="startTimer" @mouseup="clearTimer">按住我</div>
</template>

<script>
  export default {
    data() {
      return {
        timer: null
      }
    },
    methods: {
      startTimer() {
        this.timer = setTimeout(() => {
          console.log('长按事件触发')
        }, 1000)
      },
      clearTimer() {
        clearTimeout(this.timer)
      }
    }
  }
</script>

Dalam kod di atas, kami menentukan kaedah startTimer untuk bertindak balas peristiwa akhbar Tetikus . Dalam kaedah ini, kami menggunakan kaedah setTimeout untuk menetapkan pemasa dan menetapkannya kepada pembolehubah pemasa. Selepas pemasa dilaksanakan, fungsi panggil balik acara tekan lama akan dicetuskan, sekali gus merealisasikan kesan tekan lama tetikus.

Namun, kita juga perlu mengosongkan pemasa dalam acara naik tetikus, jika tidak, acara tekan lama akan terus dilaksanakan selepas tetikus dilepaskan. Ini memerlukan kami untuk menentukan kaedah clearTimer untuk mengosongkan pemasa.

Jika kami ingin melakukan beberapa operasi tertentu dalam acara akhbar lama, seperti memaparkan menu atau muncul kotak gesaan, kami hanya perlu menambah kod yang sepadan dalam fungsi panggil balik. Contohnya:

startTimer() {
  this.timer = setTimeout(() => {
    console.log('长按事件触发')
    alert('您按下了鼠标超过 1 秒钟')
  }, 1000)
}

Kod di atas akan muncul kotak gesaan apabila peristiwa tekan lama dicetuskan, memberitahu pengguna bahawa tetikus telah ditekan selama lebih daripada 1 saat.

Akhir sekali, apa yang perlu kita ambil perhatian ialah jika kita menggunakan acara tekan lama pada terminal mudah alih, kita perlu menukar acara turun tetikus kepada acara permulaan sentuh dan acara tetikus kepada acara hujung sentuh untuk memastikan acara tekan lama boleh dicetuskan secara normal pada peranti mudah alih.

Ringkasnya, kaedah melaksanakan acara tekan lama tetikus dalam Vue adalah sangat mudah. Anda hanya perlu menentukan pemasa, tentukan sama ada acara akhbar lama dicetuskan dalam tempoh masa tertentu dan kosongkan pemasa pada penghujungnya.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kesan tekan lama tetikus dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!