Long press in Ionic Vue

Ionic Framework Ionic Vue
1

How should one create a long press handler in Ionic Vue? E.g., instead of tapping on a button, this handler would detect a 3 second long press and trigger a different menu.

I found this for Angular

Should I rebuild long-press from scratch using the Gestures API or does anyone know of a plugin that will work with Ionic Vue?

1 Like
2

There’s a post on the Ionic blog that goes into how to do it using gestures.

1 Like
3

OP did you get this working? I followed the tutorial and got it running on angular but I am having trouble translating it to my VUE app. I am getting the REF correctly (I think) and the gesture is being made no problem but when I click on the ion-button nothing happens (just trying console.log)

4

Hey, sory to take so long to reply. Did you solve this?

I ended up changing long press to double tap, but the implementation is similar:

mounted() {
    const DOUBLE_CLICK_THRESHOLD = 500;
    const tappable = document.querySelector('#tap' + this.group[0].i);
    const gesture = createGesture({
      el: tappable,
      threshold: 0,
      onStart: () => {
        onStart();
      }
    });
    gesture.enable(true);
    let lastOnStart = 0;
    const onStart = () => {
      const now = Date.now();
      if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
        this.$nextTick(function () {
          this.$emit('doubletap', {group: this.group, i: this.i})
        })
        lastOnStart = 0;
      } else {
        lastOnStart = now;
      }
      setTimeout(() => {
        if (lastOnStart > 0) {
          this.$emit('singletap', {group: this.group, i: this.i})
          lastOnStart = 0;
        }
      }, DOUBLE_CLICK_THRESHOLD + 100)

    }
  }
1 Like
5

Yes thank you, I did something similar to what you did in mounted()!