Vue 3.0 Compatible Click Away Directive

Related tags

vuejs vue vue3
Overview

Vue Click Away

Demo is available using VitePress and is included in this repository. See Demo Section on how to use and the reason why it's not live yet.

Vue 3.0 Compatible Click Away Directive

npm version GitHub issues NPM GitHub contributors GitHub code size in bytes

Example GIF

Overview

Detect if a click event happened outside of an element. Compatible with Vue 3.x.

Requirements

  • Vue 3.x

Installation

npm i -s vue3-click-away

yarn add vue3-click-away

Usage

By default the module exports a plugin, but you can also use this as a mixin which is documented below or as a directive.

import { createApp } from "vue";
import App from "./App.vue";
import VueClickAway from "vue3-click-away";

const app = createApp(App);

app.use(VueClickAway) // Makes 'v-click-away' directive usable in every component
app.mount('#app')

With Options API

...
">
<template>
  <div v-click-away="onClickAway">
    ...
  div>
template>

<script>
export default {
  methods: {
    onClickAway(event) {
      console.log(event)
    }
  }
}
script>

or with Vue Composition API & Typescript

...
">
<template>
  <div v-click-away="onClickAway">
    ...
  div>
template>

<script>
export default {
  setup() {
    const onClickAway = (event) => {
      console.log(event)
    }

    return { onClickAway }
  } 
}
script>

Directive

...
">
<template>
  <div v-click-away="onClickAway">
    ...
  div>
template>

import { directive } from "vue3-click-away";
export default {
  directives: {
    ClickAway: directive
  },
  methods: {
    onClickAway(event) {
      console.log(event);
    }
  }
}

Mixin

...
">
<template>
  <div v-click-away="onClickAway">
    ...
  div>
template>

import { mixin as VueClickAway } from "vue3-click-away";
export default {
  mixins: [VueClickAway],
  methods: {
    onClickAway(event) {
      console.log(event);
    }
  }
}

Demo

Currently VitePress is having an issue building for production since Directives require SSR implementation and there is no way to override this or skip it (VuePress has ClientOnly component, VitePress doesn't, Yet).

I've opened an issue and pending to see if there is a way to go around it, Click Here to view the issue reported.

For the time being, to test this out clone the repository and run the following inside the /docs folder

npx vitepress

VitePress Documentation

Issues
  • Typescript support

    Typescript support

    Hi, @VinceG , thanks for your works. Could you add typescript type defines for vue-click-away?

    opened by StarkShang 2
  • updated触发导致的bug

    updated触发导致的bug

    vnode没有传给onMounted函数,导致报错

    bug 
    opened by ghost 1
  • No Types for the directive or mixin

    No Types for the directive or mixin

    Please add type definitions for the directive and mixin.

    enhancement 
    opened by Kaelten 1
  • v1.2.0 is not listed on NPM.

    v1.2.0 is not listed on NPM.

    image Would be real nice to have the updated TS types in NPM as I just converted a work project to use TS.

    opened by Spice-King 1
  • Doesn't seem to get click event

    Doesn't seem to get click event

    It seems that only the TouchEvents are recorded and not the ClickEvents.
    I don't know if it is a bug or the default behaviour.

    In fact my config :

    <script setup>
      import { directive as ClickAway } from 'vue3-click-away'
    
      function onClickAway(event) {
        console.log(event)
      }
    </script>
    
    <div v-click-away="onClickAway">
    ...
    </div>
    

    When I inspect in Desktop mode nothing is outputted in the console when i click outside.
    When I inspect in Mobile view I get TouchEvent {...} logged out every time i touch outside the div.

    Package.json

    "dependencies": {
        "axios": "^0.21.1",
        "vue": "^3.0.5",
        "vue-router": "^4.0.6",
        "vue3-click-away": "^1.2.1",
        "vuex": "^4.0.0"
      },
    

    Thank you for your work on this vue3 module, because It helps a lot !

    UPDATE

    If you remove the param in onClickAway method it works. I got that from the vue-clickaway repo (https://github.com/simplesmiler/vue-clickaway)

    Prior to [email protected]^2.0, directive were able to accept statements. This is no longer the case. If you need to pass arguments, just do v-on-clickaway="() => away(arg1)".

    opened by bfourgeaud 1
  • Made it a plugin to install for Vue 3

    Made it a plugin to install for Vue 3

    opened by rafalolszewski94 0
  • Rafalolszewski94 update vitepress

    Rafalolszewski94 update vitepress

    Use v0.9.0

    @rafalolszewski94

    opened by VinceG 0
  • Rafalolszewski94 added basic typing

    Rafalolszewski94 added basic typing

    fixed conflicts

    opened by VinceG 0
  • Click and Drag evaluates point of release instead of initial click.

    Click and Drag evaluates point of release instead of initial click.

    It's a habit, when selecting text, to click and drag way off to one side to grab everything. However, this triggers the click-away signal and can affect the page in a way that impedes or cancels the selection. For this reason, I would suggest evaluating the click on mousedown instead of mouseup.

    opened by astarrh 0
  • Elements with a v-if tag are not evaluated as a descendant.

    Elements with a v-if tag are not evaluated as a descendant.

    It seems that anything located in or beneath an element using v-if is disqualified from inheritance.

        <div v-click-away="doAction"> 
    
            <div id="worksFine">
                  DivContent
            </div>
    
            <div id='disqualified' v-if="someFlag === true">
                This still triggers "doAction" (even with someFlag set to true)
            </div>
    
        </div>
    

    This was happening in my custom directive as well. It seems that v-if breaks .contains() in some way.

    opened by astarrh 0
  • Clickaway on fixed element

    Clickaway on fixed element

    Hello,

    I have a menu item which is absolute on desktop and fixed (fullscreen) on mobile.
    Problem is that the clickaway directive works for desktop (when container is absolute), but on my mobile version (when container is fixed) it doesn't work.
    In fact wherever i click on screen it throws me a click-away event.

    I know that fixed position translates the axis, and therefor some things can get tricky.

    opened by bfourgeaud 0
Releases(v1.2.1)
Owner
Vincent
@laravel, @vuejs, @nodejs
Vincent
Vue.js derective for setting an aspect ratio

v-aspect-ratio Vue.js directive for setting an aspect ratio 1.x documentation can be found here. v-aspect-ratio Installation Via NPM Via Yarn Directly

Andrew 21 Jul 20, 2021
petite-vue is an alternative distribution of Vue optimized for progressive enhancement.

petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for "sprinkling" small amount of interactions on an existing HTML page rendered by a server framework.

vuejs 3.6k Jul 25, 2021
Vue directive (Vue.js 2.x) for spatial navigation (keyboard navigation)

vue-spatialnavigation Vue directive (Vue.js 2.x) for spatial navigation (keyboard navigation) Installation npm install vue-spatialnavigation --save Sp

TWC Apps 69 Jan 11, 2021
Material Ripple Effect as Vue Directive.

Material Ripple Effect Material Ripple Effect as Vue Directive. This directive it's meant to be used in any element in which you like to achieve such

Pygmy Slow Loris 275 Jun 21, 2021
Long click directive library for VueJS

vue-long-click Vue long click (longpress) directive Checkout the demo at https://ittus.github.io/vue-long-click/ Install npm install vue-long-click --

Thang Minh Vu 43 Mar 28, 2021
Vue.js 2.0 directive to detect images loading

Vue.ImagesLoaded A Vue.js 2.0 directive to detect when images have been loaded, based on imagesLoaded This directive allows to get a callback when chi

David Desmaisons 137 Jul 13, 2021
A directive for accessing the Google Analytics window.ga object by using params/attributes

vue-ga-directive A directive for accessing the Google Analytics window.ga object by using attributes. Install Available through npm as vue-ga-directiv

James Doyle 13 Jul 20, 2020
Vue plugin for KaTeX

vue-katex KaTeX enables fast math typesetting for the web. vue-katex is a lightweight plugin introduces a simple way to use KaTeX in your Vue app. Enj

Luc 95 Jun 30, 2021
🔦 Vue component for highlight multiple instances of a word

vue-highlight-text Vue component for highlight multiple instances of a word Installation # with yarn yarn add vue-highlight-text # with npm npm insta

Chanwit Piromplad 53 May 24, 2021
A Vue.js directive for animating an element from height: auto; to height: 0px; and vice-versa.

v-show-slide A Vue.js directive for animating an element from height: auto to height: 0px and vice-versa. ?? 3kb (1kb gzipped) ?? No dependencies ?? T

Pete Hegman 94 Jun 5, 2021
A Vue.js 2 component to clone DOM elements

vue-cloneya A vue component to clone DOM elements Live demo here Install yarn add vue-cloneya # or npm i vue-cloneya Import import Vue from 'vue'

Rida Amirini 14 Mar 13, 2021
A vue directive which automatically resize font size based on element width.

Vue Resize Text A vue directive which automatically resize font size based on element width. It makes the font-size flexible on fluid or responsive la

Jayesh Vachhani 61 Jul 22, 2021
⬜️ Vue directive to blur an element dynamically

v-blur Vue directive to blur an element dynamically. Useful to partially hide elements, use it with a spinner when content is not ready among other th

Nicolas Del Valle 180 Jul 9, 2021
Heatmap directive for tracking user activity

vue-heatmapjs A vue directive for collecting and displaying user activity on a component Demo Install You can use NPM or Yarn to add this plugin to yo

Brock Reece 171 Jul 5, 2021