@nanogiants/vue3-longpress
v1.0.8
Published
This package contains a Vue 3 directive which adds the `@longpress` event to an element.
Downloads
162
Readme
vue3-longpress
This package contains a Vue 3 directive which adds the @longpress
event to an element.
Installation
npm i @nanogiants/vue3-longpress
# or
yarn add @nanogiants/vue3-longpress
Usage
// main.ts file
import { vLongpress } from '@nanogiants/vue3-longpress';
import App from './App.vue';
const app = createApp(App);
app.directive('use-longpress', vLongpress);
// component.ts
<template>
<div>
<div v-use-longpress="500" @longpress="onLongpress">Hello World!</div>
<div v-use-longpress @longpress="onLongpress">Hello World!</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const onLongpress = (e: CustomEvent) => {
console.log('onLongpress', e);
};
return { onLongpress };
},
});
</script>
args
There is only one arg you can pass.
The duration can be set as an interger in ms. Default is 500.
<div v-use-longpress="1000" @longpress="onLongpress"></div>