Skip to content

MaybeQHL/v-touchshow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

v-touchshow

基于any-touch手势库封装的Vue(2 & 3)的指令

如果觉得还不错, star一下项目

npm version downloads Jsdelivr Hits star star

安装

Vue3

yarn add @maybecode/v-touchshow

Vue2

yarn add @maybecode/v-touchshow @vue/composition-api

注册

Vue3

import { createApp } from 'vue';
import VTouchshow from '@maybecode/v-touchshow'

const app = createApp();

app.use(VTouchshow);

Vue2

import Vue from 'vue';
import VTouchshow from '@maybecode/v-touchshow'

Vue.use(VTouchshow);

在线演示

Demo

具体使用

手势识别器支持事件对照表

识别器 事件名 说明
tap tap 单击
press press / pressup 按压 / 松开
pan pan / panstart / panmove / panend /panup/pandown/panright/panleft 拖拽 / 拖拽开始 / 拖拽进行中 / 拖拽结束/ 上下左右滑动
swipe swipe / swipeup / swipedown / swiperight / swipeleft 快划 / 不同方向快划
pinch pinch / pinchstart / pinchmove / pinchend / pinchin /pinchout 缩放 / 缩放开始 / 缩放进行中 / 缩放结束 / 放大 / 缩小
rotate rotate / rotatestart / rotatemove / rotateend 旋转 / 旋转开始 / 旋转进行中 / 旋转结束

可传入配置兼容any-touch

<div
    v-touchshow="config"
 >
</div>

1. 设置过渡动画

<style>

.block{
    transition: transform 0.3s ease-in-out; // 设置过渡动画
}
</style>

2. 编写模板代码

<template>
<div
    class="block"
    v-touchshow:swipeup="onSwipeup"
>
</div>
</template>

3. 处理事件回调

<script lang="ts" setup>
import { Callback } from '@maybecode/v-touchshow';

const onSwipeup: Callback = (e, el) => {
    el.style.transform = "translateY(-30vw)"
}
</script>

移动端尽量使用 tap 代理 click

在移动端 touchstart 比 click 先触发, 所以 touchstart 阶段的 preventDefault 会阻止 click 触发, 恰恰 any-touch 默认在 touchstart 中使用了preventDefault, 用来阻止了浏览器默认事件的触发,比如 click 和页面滚动.

如果移动端非要使用 click 做如下设置

v-touchshow="{ preventDefault: false }"

Browsers support

IE / Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Edge last 2 versions last 2 versions last 2 versions

License

MIT

About

基于any-touch手势库封装的Vue(2 & 3)的指令

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published