Bagaimana untuk melaksanakan pemantauan acara seperti klik, klik dua kali dan tekan lama dalam Vue?

Dalam Vue, kami boleh menggunakan arahan v-on untuk mendengar acara pada elemen DOM. Walau bagaimanapun, dalam pembangunan sebenar, kita mungkin perlu memantau peristiwa yang lebih kompleks, seperti klik tunggal, klik dua kali, tekan lama, dll. Pada masa ini, penggunaan v-on nampaknya agak tidak mencukupi.

Jadi, bagaimana untuk melaksanakan pemantauan acara ini dalam Vue? Artikel ini akan menerangkannya kepada anda secara terperinci.

1. Pemantauan acara klik

Acara klik adalah sangat biasa dalam aplikasi Vue menyediakan singkatan v-on:klik @klik untuk memantau acara klik:

<template>
  <button @click="handleClick">单击我</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      console.log('单击了按钮！');
    }
  }
}
</script>

Dalam kod di atas, kami menambah pada butang @klik pendengar acara dan. mengikatnya kepada kaedah bernama handleClick.

Selain kaedah di atas, kami juga boleh menggunakan pengubahsuai yang disediakan oleh Vue untuk melanjutkan acara klik. Contohnya, untuk mengelakkan acara menggelegak:

<template>
  <div @click.stop="handleClickParent">
    <button @click.stop="handleClickChild">单击我</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClickParent() {
      console.log('父元素单击了！');
    },
    handleClickChild() {
      console.log('子元素单击了！');
    }
  }
}
</script>

Dalam kod di atas, kami mengikat acara klik pada elemen induk dan elemen anak masing-masing dan menggunakan pengubah suai @click.stop untuk mengelakkan acara daripada menggelegak. Dengan cara ini, apabila kita mengklik pada elemen anak, hanya peristiwa klik unsur anak akan dicetuskan dan peristiwa klik unsur induk tidak akan dicetuskan.

2. Pemantauan acara klik dua kali

Jika kita perlu memantau acara klik dua kali, Vue tidak menyediakan penyelesaian langsung. Tetapi kami boleh menggunakan kaedah setTimeout dan clearTimeout untuk memantau acara klik dua kali:

<template>
  <button @click="handleClick" @dblclick="handleDoubleClick">单击或双击我</button>
</template>
<script>
export default {
  data() {
    return {
      timer: null  // 定义一个计时器
    }
  },
  methods: {
    handleClick() {
      this.timer = setTimeout(() => {
        console.log('单击了按钮！');
        this.timer = null;
      }, 250);  // 250 毫秒内单击时触发单击事件
    },
    handleDoubleClick() {
      clearTimeout(this.timer);
      console.log('双击了按钮！');
      this.timer = null;
    }
  }
}
</script>

Dalam kod di atas, kami menentukan pemasa Apabila pengguna mengklik butang, kami memulakan pemasa dan menunggu selama 250 milisaat. Jika pengguna mengklik butang sekali lagi dalam masa ini, kami mengosongkan pemasa dan melancarkan acara klik dua kali.

3. Pemantauan acara akhbar panjang

Serupa dengan acara klik dua kali, Vue tidak menyediakan penyelesaian pemantauan acara akhbar panjang secara langsung. Tetapi anda juga boleh menggunakan kaedah setTimeout dan clearTimeout untuk memantau acara tekan lama:

<template>
  <button @mousedown="handleMouseDown" @mouseup="handleMouseUp" @touchstart="handleMouseDown" @touchend="handleMouseUp">长按我</button>
</template>
<script>
export default {
  data() {
    return {
      timer: null  // 定义一个计时器
    }
  },
  methods: {
    handleMouseDown() {
      this.timer = setTimeout(() => {
        this.timer = null;
        console.log('长按了按钮！');
      }, 1000);  // 1 秒钟之后触发长按事件
    },
    handleMouseUp() {
      clearTimeout(this.timer);
      this.timer = null;
    }
  }
}
</script>

Dalam kod di atas, kami mengikat pendengar acara turun tetikus dan naik tetikus pada butang Di bahagian mudah alih, kami juga boleh mendengar acara touchstart dan touchend. Apabila pengguna menekan lama butang, kami memulakan pemasa dan menunggu selama 1 saat. Jika pengguna melepaskan butang dalam masa ini, kami mengosongkan pemasa dan mencetuskan acara akhbar lama jika tidak, kami mencetuskan acara akhbar lama.

4. Ringkasan

Artikel ini terutamanya memperkenalkan cara melaksanakan kaedah pemantauan acara seperti klik, klik dua kali dan tekan lama dalam Vue. Dengan menggunakan arahan v-on dan beberapa kaedah JS, kami boleh mendengar pelbagai acara kompleks dengan mudah untuk memberikan pengalaman interaktif yang lebih kaya untuk aplikasi.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemantauan acara seperti klik, klik dua kali dan tekan lama dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!