Ionic5 Vue3自定义指令结合hammerjs监听Ionic手势事件

ionic5 Vue3实战教程： https://www.itying.com/goods-1150.html

在Ionic5 Vue3的项目中监听手势事件和vue3的项目中监听手势事件是一样的。下面我们就看看Ionic5 Vue3项目中如何自定义指令结合hammerjs监听Ionic手势事件

一、手势事件介绍

常见的gestures 手势事件包括: tap、 press、 pan、 swipe 、rotate、pinch等

tap 点击事件 press 长按事件 pan 滑动的时候触发的事件,滑动触发多次 swipe 滑动事件滑动触发一次 rotate 旋转事件 pinch 捏合(pinch)手势

ionic Vue官方文档中没有给我们提供手势相关事件和方法，所以接下来给大家讲讲如何使用vue3中的指令结合hammerjs实现ionic vue中的手势事件

二、vue3中自定义指令

https://v3.cn.vuejs.org/guide/custom-directive.html#简介

https://v3.vuejs.org/guide/migration/custom-directives.html#_3-x-syntax

<p v-highlight="'yellow'">Highlight this text bright yellow</p>

const app = Vue.createApp({})

app.directive('highlight', {
  beforeMount(el, binding) {
    el.style.background = binding.value
  }
})

三、Ionic Vue中集成hammerjs配置手势事件

hammerjs是一个应用非常广泛的手势框架

hammerjs官方文档: http://hammerjs.github.io/getting-started

types/hammerjs地址：https://www.npmjs.com/package/@types/hammerjs

**1、安装types/hammerjs hammerjs **

cnpm install --save [@types](/user/types)/hammerjs
cnpm install --save hammerjs

2、main.ts中引入hammerjs 配置手势事件

import Hammer  from "hammerjs"

const app = createApp(App)
  .use(IonicVue)
  .use(router);
app.directive('tap', {
  beforeMount(el, binding) {
    const hammerTest = new Hammer(el);
    hammerTest.on("tap", binding.value);    
  }
})
app.directive('press', {
  beforeMount(el, binding) {
    const hammerTest = new Hammer(el);
    hammerTest.on("press", binding.value);
  }
})

3、模板中使用手势事件

<ion-button v-press="doLogin">
        长安触发的方法
</ion-button>
<ion-button v-tap="doRegister">
    tap单击触发的方法
</ion-button>