Merge pull request #3 from kiccer/dev

update

README.md

@@ -8,9 +8,10 @@
 npm install --save vue-directive-extend
 ```
 
-### Using
+### Usage
+> In `main.js` files.
+
 ```javascript
-// main.js
 import Vue from 'vue'
 import App from './App.vue'
 import vueDirectiveExtend from 'vue-directive-extend'
@@ -24,7 +25,8 @@ new Vue({
 }).$mount('#app')
 ```
 
-In `.vue` files.
+> In `.vue` files.
+
 ```vue
 <template lang="html">
   <div class="demoVue">
@@ -50,3 +52,48 @@ export default {
 </style>
 
 ```
+
+### Event listener list
+
+<escape>
+  <table>
+    <tr>
+      <th>Listener</th>
+      <th>description</th>
+      <th>Modifiers</th>
+      <th>Modifiers description</th>
+    </tr>
+    <tr>
+      <td rowspan="2"><code>v-resize</code></td>
+      <td rowspan="2">Use the element-resize-detector plug-in to listener element resize events.</td>
+      <td><code>.lazy</code></td>
+      <td>Lazy mode. Triggering resize too often will only work for the last time.</td>
+    </tr>
+    <tr>
+      <td><code>.100</code></td>
+      <td>After <code>.lazy</code>, set maximum time difference. If not set, then default is 100.</td>
+    </tr>
+    <tr>
+      <td rowspan="2"><code>v-mousewheel</code></td>
+      <td rowspan="2">Use the jquery-mousewheel plug-in to listener mouse wheel events.</td>
+      <td><code>.stop</code></td>
+      <td>Same as <code>e.stopPropagation()</code></td>
+    </tr>
+    <tr>
+      <td><code>.prevent</code></td>
+      <td>Same as <code>e.preventDefault()</code></td>
+    </tr>
+    <tr>
+      <td><code>v-load</code></td>
+      <td>Triggered when the element is inserted into the DOM.</td>
+      <td>-</td>
+      <td>-</td>
+    </tr>
+    <tr>
+      <td><code>v-unload</code></td>
+      <td>Triggered when the element is removed from the DOM.</td>
+      <td>-</td>
+      <td>-</td>
+    </tr>
+  </table>
+</escape>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-directive-extend",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "This project is used to extend more event listener for Vue.",
   "main": "./public/js/vue-directive-extend.js",
   "keywords": [

public/js/vue-directive-extend.js

@@ -1,9 +1,11 @@
 import vueDirectiveResize from './vue-directive-resize'
 import vueDirectiveMousewheel from './vue-directive-mousewheel'
+import vueDirectiveLoad from './vue-directive-load'
 
 function vueDirectiveExtend (vm) {
   vm.use(vueDirectiveResize)
   vm.use(vueDirectiveMousewheel)
+  vm.use(vueDirectiveLoad)
 }
 
 export default vueDirectiveExtend

public/js/vue-directive-load.js

@@ -0,0 +1,22 @@
+function vueDirectiveLoad (vm) {
+  vm.directive('load', {
+    // bind (el, binding) {},
+    inserted (el, binding) {
+      binding.value && binding.value()
+    }
+    // componentUpdated (el) {},
+    // update (el) {},
+    // unbind (el, binding) {}
+  })
+  vm.directive('unload', {
+    // bind (el, binding) {},
+    // inserted (el, binding) {},
+    // componentUpdated (el) {},
+    // update (el) {},
+    unbind (el, binding) {
+      binding.value && binding.value()
+    }
+  })
+}
+
+export default vueDirectiveLoad

public/js/vue-directive-mousewheel.js

@@ -5,14 +5,19 @@ function vueDirectiveMousewheel (vm) {
   vm.directive('mousewheel', {
     // bind (el, binding) {},
     inserted (el, binding) {
-      // el.addEventListener('mousewheel', binding.value)
-      $(el).on('mousewheel', binding.value)
+      $(el).off('mousewheel')
+      $(el).on('mousewheel', e => {
+        let { modifiers, value } = binding
+        value && value(e)
+        modifiers.stop && e.stopPropagation()
+        modifiers.prevent && e.preventDefault()
+        if (modifiers.stop && modifiers.prevent) return false
+      })
     },
-    // componentUpdated (el) {},
-    // update (el) {},
-    unbind (el, binding) {
-      // el.removeEventListener('mousewheel', binding.value)
-      $(el).off('mousewheel', binding.value)
+    // componentUpdated (el, binding) {},
+    // update (el, binding) {},
+    unbind (el) {
+      $(el).off('mousewheel')
     }
   })
 }

public/js/vue-directive-resize.js

@@ -11,15 +11,35 @@ function vueDirectiveResize (vm) {
     strategy: 'scroll'
   })
 
+  let lazyHandle = function (binding) {
+    let nums = Object.keys(binding.modifiers).map(n => +n).filter(n => !isNaN(n))
+    clearTimeout(binding.lazyTimer)
+    binding.lazyTimer = setTimeout(() => {
+      binding.value && binding.value()
+    }, nums.length ? Math.max(...nums) : 100)
+  }
+
+  let resizeHandle = function (binding) {
+    if (binding.modifiers.lazy) {
+      lazyHandle(binding)
+    } else {
+      binding.value && binding.value()
+    }
+  }
+
   vm.directive('resize', {
     // bind (el, binding) {},
     inserted (el, binding) {
-      erd.listenTo(el, binding.value)
+      erd.listenTo(el, () => {
+        resizeHandle(binding)
+      })
     },
     // componentUpdated (el) {},
     // update (el) {},
     unbind (el, binding) {
-      erd.removeAllListeners(el, binding.value)
+      erd.removeAllListeners(el, () => {
+        resizeHandle(binding)
+      })
     }
   })
 }

src/App.vue

@@ -31,5 +31,6 @@ export default {
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
+  height: 1000px;
 }
 </style>

src/components/HelloWorld.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="hello" v-resize="onResize" v-mousewheel="onMousewheel">
-    <h1>{{ msg }}</h1>
+  <div class="hello" v-resize.lazy="onResize" v-mousewheel.prevent="onMousewheel" v-load="onLoad" v-unload="onUnload">
+    <h1 v-mousewheel.stop="onMousewheel">{{ msg }}</h1>
     <p>
       For a guide and recipes on how to configure / customize this project,<br>
       check out the
@@ -38,8 +38,14 @@ export default {
     msg: String
   },
   methods: {
+    onLoad () {
+      console.log('onLoad')
+    },
+    onUnload () {
+      console.log('onUnload')
+    },
     onResize () {
-      console.log(1111)
+      console.log('onResize')
     },
     onMousewheel (e) {
       console.log(e)
@@ -50,6 +56,10 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.hello {
+  height: 200px;
+  overflow: auto;
+}
 h3 {
   margin: 40px 0 0;
 }