Vue-custom-events

This is a vue plugin for create custom events.

Install

npm install vue-custom-events

Setup

import Vue from "vue"
import VueCustomEvents from "vue-custom-events"

Vue.use(VueCustomEvents, options)

Options

• name: directive name, default is events.

Build-in-events

• outerClick: click outside target element

• InnerClick: click inner target element(not include self)

Usage

• on template:

<div
  v-events
  @innerClick="handleInnerClick"
  @outerClick="handleOuterClick"
>

</div>

• Register a event

  This must run before install plugin

VueCustomEvents.registerEvent(name, {
  hanlder(el, emit) {
    this.listener = event => {
      // emit event in some condition
      // event name is the name you register
      emit()
    }

    window.addEventListener("click", this.listener)
  },

  // this is called when Vue directive unbind called
  unbind(el) {
    // you can do something like remove listener here.
    window.removeEventListener("click", this.listener)
  }
})