v-touchshow v1.0.0

v-touchshow

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

安装

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

具体使用

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

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>

Browsers support

赞助

优先处理问题，以及定制化方案

License

MIT