代码拉取完成，页面将自动刷新
基于any-touch手势库封装的Vue(2 & 3)的指令
如果觉得还不错, star一下项目, 也可以在网页底部捐赠给作者一杯咖啡钱,Thanks♪(･ω･)ﾉ。
yarn add @maybecode/v-touchshow
yarn add @maybecode/v-touchshow @vue/composition-api
import { createApp } from 'vue';
import VTouchshow from '@maybecode/v-touchshow'
const app = createApp();
app.use(VTouchshow);
import Vue from 'vue';
import VTouchshow from '@maybecode/v-touchshow'
Vue.use(VTouchshow);
| 识别器 | 事件名 | 说明 |
|---|---|---|
| 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 | 旋转 / 旋转开始 / 旋转进行中 / 旋转结束 |
<div
v-touchshow="config"
>
</div>
<style>
.block{
transition: transform 0.3s ease-in-out; // 设置过渡动画
}
</style>
<template>
<div
class="block"
v-touchshow:swipeup="onSwipeup"
>
</div>
</template>
<script lang="ts" setup>
import { Callback } from '@maybecode/v-touchshow';
const onSwipeup: Callback = (e, el) => {
el.style.transform = "translateY(-30vw)"
}
</script>
在移动端 touchstart 比 click 先触发, 所以 touchstart 阶段的 preventDefault 会阻止 click 触发, 恰恰 any-touch 默认在 touchstart 中使用了preventDefault, 用来阻止了浏览器默认事件的触发,比如 click 和页面滚动.
如果移动端非要使用 click 做如下设置
v-touchshow="{ preventDefault: false }"
 Edge |
 Firefox |
 Chrome |
 Safari |
|---|---|---|---|
| Edge | last 2 versions | last 2 versions | last 2 versions |
优先处理问题，以及定制化方案
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。