vh
@yst/vue-hoverable
npm i @yst/vue-hoverable
vh

@yst/vue-hoverable

@yst/vue-hoverable · Lightweight Vue utility for listening to mouse hover.

by Yom T

1.0.4 (see all)License:MITTypeScript:Not FoundCategories:Vue Mouse Events
npm i @yst/vue-hoverable
Readme

vue-hoverable

Lightweight Vue utility for listening to mouse hover (mouseenter and mouseleave).

Installation

NPM

$ npm install @yst/vue-hoverable

Yarn

$ yarn add @yst/vue-hoverable

Import and install it as plugin:

import Vue from 'vue';
import Hoverable from '@yst/vue-hoverable';

Vue.use(Hoverable);

Options

Scoped slots

on.hover

  • type: boolean

Provides an info of the current mouse state ("entering" or "leaving").

Usage

It doesn't wrap the target element/component with another one, because these mouse events are attached directly onto the target. So in the following case, the button will have mouse-hover and click handlers attached to it.

<hoverable #on="{ hover }">
  <button 
    :style="{ backgroundColor: hover ? 'green' : 'blue' }"
    @click="handleClick">
    Click me
  </button>
</hoverable>