I don’t understand how to integrate the Vue Gestures double press API example in the Ionic documentation into a Vue component. The example seems to be lacking any Component context and my attempts to integrate either inline after the tag or in a setup() or created() method all produce an event registration error.
Uncaught (in promise) TypeError: Cannot read property '__zone_symbol__addEventListener' of null
Here is an example that produces the error:
DoublePressDemo.vue
<template>
<ion-content class="ion-padding-top">
<div class="rectangle">
Double click me to change the color
</div>
</ion-content>
</template>
<script>
import {IonContent} from '@ionic/vue';
import {createGesture} from '@ionic/vue';
export default {
name: "DoublePressDemo",
components: {IonContent},
created() {
const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
const DOUBLE_CLICK_THRESHOLD = 500;
const rectangle = document.querySelector('.rectangle');
const gesture = createGesture({
el: rectangle,
threshold: 0,
onStart: () => {
onStart();
}
});
gesture.enable(true);
let lastOnStart = 0;
let currentColor = 'rgba(0, 0, 255, 0.5)';
const onStart = () => {
const now = Date.now();
if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
rectangle.style.setProperty('background', getRandomBackground());
lastOnStart = 0;
} else {
lastOnStart = now;
}
}
const getRandomBackground = () => {
const options = backgrounds.filter(bg => bg !== currentColor);
currentColor = options[Math.floor(Math.random() * options.length)];
return currentColor;
}
}
}
</script>
<style scoped>
.rectangle {
width: 100%;
max-width: 500px;
height: 100px;
background-color: rgba(0, 0, 255, 0.5);
text-align: center;
line-height: 100px;
user-select: none;
}
</style>
