touchable - Yampi Developer Portal

Mixin para componentes que precisam reagir a gestos de toque em dispositivos móveis. Registra listeners de touch no elemento raiz e calcula o deslocamento horizontal (touchDelta) entre o início e o fim do toque, útil para implementar comportamentos de swipe.

Uso

import touchableMixin from '@/mixins/touchable';

export default {
    mixins: [touchableMixin],
    mounted() {
        this.bootTouchable(); // necessário chamar manualmente
    },
};

Props injetadas

Prop	Tipo	Valor padrão	Descrição
`useCaptureByEvent`	`Array`	`[{ touchstart: false }, ...]`	Configuração de `useCapture` por evento de toque.

Data injetada

Propriedade	Tipo	Descrição
`initialClientX`	`Number`	Posição X do toque inicial.
`finalClientX`	`Number`	Posição X do toque final.
`touchDelta`	`Number`	Diferença entre `initialClientX` e `finalClientX`. Positivo = swipe para esquerda.
`touchStartLength`	`Number`	Número de pontos de toque no início do gesto.

Métodos injetados

Método	Descrição
`bootTouchable`	Registra os event listeners de touch no elemento raiz (`$el`). Deve ser chamado no `mounted`.

Eventos emitidos

Evento	Payload	Descrição
`touchstart`	`TouchEvent`	Emitido ao iniciar o toque.
`touchend`	`TouchEvent`	Emitido ao finalizar o toque.
`touchcancel`	`TouchEvent`	Emitido quando o toque é cancelado.
`touchleave`	`TouchEvent`	Emitido quando o toque sai do elemento.
`touchmove`	`TouchEvent`	Emitido durante o movimento do toque.

⌘I