vue-directive-extend

This project is used to extend more event listener for Vue.

NPM

npm install --save vue-directive-extend

Usage

In main.js files.

import Vue from 'vue'
import App from './App.vue'
import vueDirectiveExtend from 'vue-directive-extend'

Vue.use(vueDirectiveExtend)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

In .vue files.

<template lang="html">
  <div class="demoVue">
    <div class="test" v-resize="onResize" v-mousewheel="onMousewheel"></div>
  </div>
</template>

<script>
export default {
  name: 'demo',
  methods: {
    onResize () {
      console.log('onResize')
    },
    onMousewheel (e) {
      console.log(e)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

Event listener list

Listener	description	Modifiers	Modifiers description
v-resize	Use the element-resize-detector plug-in to listener element resize events.	.lazy	Lazy mode. Triggering resize too often will only work for the last time.
		.100	After .lazy, set maximum time difference. If not set, then default is 100.
v-mousewheel	Use the jquery-mousewheel plug-in to listener mouse wheel events.	.stop	Same as e.stopPropagation()
		.prevent	Same as e.preventDefault()
v-load	Triggered when the element is inserted into the DOM.	-	-
v-unload	Triggered when the element is removed from the DOM.	-	-