Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vue3-hand-mobile
Advanced tools
Readme
Offer H5, mobile gesture events, support vue2, VUe3 version, add and update framework encapsulation and custom data processing and automatic adaptation based on HammerJS, provide finger long press, drag, fast slide, multi-finger zoom, multi-finger rotation operations. (提供h5,移动端手势事件,支持vue2,vue3版本,基于hammerjs进行新增更新 框架封装和自定义数据的处理及自动适配,提供手指的长按、拖曳、快滑,多指缩放,多指旋转操作。)
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0,minimum-scale=1.0"/>
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>let vPrint = new VConsole();</script>
npm install vue-hand-mobile
npm install vue3-hand-mobile
import Vue from 'vue'
import touch from 'vue-hand-mobile'
Vue.use(touch)
import { createApp } from 'vue'
import App from './App.vue'
const app=createApp(App)
import touch from 'vue3-hand-mobile'
app.use(touch)
(使用方法:在需要的dom或组件实列上通过使用指令v-touch:手势事件='callback';返回事件的回调函数对象参数evenObject,evenObject具体返回信息往下) 。
Vue2 column 1: Use the swipe gesture ---- (vue2实列一:使用快滑手势)
<template>
<div>
<div class="kuai" v-touch:swipe="vue2action">TouchAction</div>
</div>
</template>
<script>
export default {
methods:{
vue2action(evenObject){
console.log(evenObject);
}
},
}
</script>
Vue3 column 2: Use the drag left gesture ---- (vue3实列二:使用向左拖动手势)
<template>
<div class="kuai" v-touch:panleft="leftAction">TouchAction</div>
</template>
<script>
export default {
setup(){
function leftAction(evenObject){
console.log(evenObject);
}
return { leftAction }
},
}
</script>
This event is triggered when a finger taps or clicks. The touchscreen time is less than 250ms, similar to the CLICK event on a PC.
手指轻拍或点击时触发该事件,触屏 时间< 250ms,类似PC端的 click 事件。
Hold down the finger to trigger the event, and the touchscreen time is > 500ms.
手指长按触发该事件,触屏 时间 > 500ms。
Finger drag specifies when the DOM is moved.
手指拖拽指定dom移动时触发。
Finger fast slide operation triggered, is usually used most mobile phone sliding operation.
手指快滑操作时触发,是平时手机用到最多的滑动操作。
Triggered when two fingers touch the screen, commonly used in zooming service scenarios.
两手指触屏等操作时触发,常见使用在缩放业务场景。
属性名称 | 描述 | 是否默认返回 |
---|---|---|
type | 手势事件名,如swipeup | true |
X | 距开始触屏位置,X轴移动的位置 | true |
Y | 距开始触屏位置,Y轴移动的位置 | true |
velocityX | X 轴上的速度,单位为 px/ms | true |
velocityY | Y 轴上的速度,单位为 px/ms | true |
direction | 手指移动的方向,值有【none、left、right、top、down】 | true |
distance | 距开始触屏位置,到当前触屏位置之间的距离 | true |
touch_Time | 距开始触摸时的总时间,单位 ms。第二次触摸时间归0重计 | true |
target | 触发手势事件的元素目标,如dom的class名为Home | true |
eventType | 触发手势事件的类型,值有【start、move、end、cancel】 | true |
pointers | 所有触摸位置点的数组,包括结束触摸点 | true |
element | 触发事件的dom元素,可对元素进行操作 | true |
scale | pinch系列两指缩放手势返回,缩放时的比列,每次触摸值都为1 | pinch手势系列事件时返回 |
rotation | rotate系列两指旋转手势返回,旋转的角度,每次触摸值都为0 | rotate手势系列事件时返回 |
Name | Description | default return |
---|---|---|
type | Gesture event name, for example, swipeup | true |
X | From where the touch screen starts, where the X-axis moves | true |
Y | From where you start the touch, where you move the Y axis | true |
velocityX | The velocity on the X-axis is px per ms | true |
velocityY | The velocity on the Y axis is px per ms | true |
direction | Direction of finger movement: 【None、left、right、top、Down】 | true |
distance | The distance between the start touch screen position and the current touch screen position | true |
touch_Time | The total time, in ms, since the start of a touch. The second touch time returns to 0 | true |
target | The object of the element that triggers the gesture event, such as dom, has a class name of Home | true |
eventType | The type of event that triggers the gesture:【start、move、end、cancel】 | true |
pointers | An array of all touch position points, including the end touch point | true |
element | The DOM element that triggers the event and can be manipulated on the element | true |
scale | The PINCH series of two-finger pinch gestures returns a scale of 1 for each touch | Pinch gesture series events |
rotation | Rotate series Two-finger rotation gesture returns. The rotation Angle is 0 for each touch | Rotate returns the rotate gesture series event |
FAQs
Vue mobile gesture action event.
The npm package vue3-hand-mobile receives a total of 14 weekly downloads. As such, vue3-hand-mobile popularity was classified as not popular.
We found that vue3-hand-mobile demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.