vue-touch-directives v0.0.0

Vue-Touch-Directives

参照本篇文档内容在vue3项目中快速使用，详细使用说明见Vue-Touch-Directives Docs

安装

# 使用npm安装
npm install vue-touch-directives

# 使用pnpm安装
pnpm add vue-touch-directives

# 使用yarn安装
yarn add vue-touch-directives

引入

在vue3项目中引入

// in main.ts
import { createApp } from 'vue'
import VueTouchDirectives from 'vue-touch-directives'
import App from './APP.vue'

const app = createApp()
app.use(VueTouchDirectives)

app.mount(App)

如何使用

在任意单文件组件中，直接使用v-xxx监听某区域内手势

<script setup lang="ts">
import type { SwipeEvent } from 'vue-touch-directives'

const onSwipe = (evt: SwipeEvent) => {
  console.log('滑动事件触发了！')
}
</script>

<template>
  <div v-swipe="onSwipe" class="test-area">
    监听该区域内的滑动手势
  </div>
</template>

<style lang="less" scoped>
.test-area {
  width: 500px;
  height: 500px;
  position: fixed;
  inset: 0;
  background-color: blue;
}
</style>