@edenchazard/vue-slick-press
v2.1.1
Published
A simple Vue 3 directive that distinguishes typical clicks from "long presses". Intended to work across touch browsers and mouse browsers.
Downloads
4
Readme
Vue Slick Press
A simple Vue 3 directive that distinguishes typical clicks from "long presses". Intended to work across touch browsers and mouse browsers.
Usage
First, install the directive using
npm install @edenchazard/vue-slick-press
Then, import it like so and configure your events:
import vSlickPress from 'vue-slick-press';
function singleClick() {
alert('click detected!');
}
function longPress() {
alert('long press detected!');
}
And then use it on a component.
<div
v-slickPress="{
click: singleClick,
longPress: longPress,
wait: 500,
disableRightClickMenu: true,
}"
> click/press here
</div>
API
There are a few configurable options per directive, these are:
| Option | Type | Description | | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------- | | click | () => void | Function to call when clicked. | | longPress | () => void | Function to call when a press extends into a long press. | | press | () => void | Function to call whenever the component is 'pressed'. Equivalent of touchdown/mousedown. | | wait | number | The period of time in miliseconds from first press to when to call a long press. | | disableRightClickMenu | boolean | If enabled, custom css will be applied to prevent the context menu appearing when held down/right click. |
TODOs
- Fix the demo so it actually works haha. Right now it's working in the project it spawned from.
Recommended IDE Setup
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
Type Support for .vue
Imports in TS
TypeScript cannot handle type information for .vue
imports by default, so we replace the tsc
CLI with vue-tsc
for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue
types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensions
from VSCode's command palette - Find
TypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Window
from the command palette.
Customize configuration
See Vite Configuration Reference.
Project Setup
npm install
Compile and Hot-Reload for Development
npm run dev
Type-Check, Compile and Minify for Production
npm run build
Lint with ESLint
npm run lint