From 13b46b867df8fec478c8014bb9a5b6fd1e8176e5 Mon Sep 17 00:00:00 2001
From: kiccer <lcb@qq.com>
Date: Thu, 24 Oct 2019 15:21:01 +0800
Subject: [PATCH] update 1. add `v-load` & `v-unload` 2. `v-resize` add
 modifiers `.lazy` & `.100` 3. `v-mousewheel` add modifiers `.stop` &
 `.prevent`

---
 README.md                             | 53 +++++++++++++++++++++++++--
 package.json                          |  2 +-
 public/js/vue-directive-extend.js     |  2 +
 public/js/vue-directive-load.js       | 22 +++++++++++
 public/js/vue-directive-mousewheel.js | 19 ++++++----
 public/js/vue-directive-resize.js     | 24 +++++++++++-
 src/App.vue                           |  1 +
 src/components/HelloWorld.vue         | 16 ++++++--
 8 files changed, 123 insertions(+), 16 deletions(-)
 create mode 100644 public/js/vue-directive-load.js

diff --git a/README.md b/README.md
index 198d2be..bcb8511 100644
--- a/README.md
+++ b/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>
diff --git a/package.json b/package.json
index a549abb..9a3290a 100644
--- a/package.json
+++ b/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": [
diff --git a/public/js/vue-directive-extend.js b/public/js/vue-directive-extend.js
index c8f8712..3be89d4 100644
--- a/public/js/vue-directive-extend.js
+++ b/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
diff --git a/public/js/vue-directive-load.js b/public/js/vue-directive-load.js
new file mode 100644
index 0000000..4a6c775
--- /dev/null
+++ b/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
diff --git a/public/js/vue-directive-mousewheel.js b/public/js/vue-directive-mousewheel.js
index bebda7d..e919050 100644
--- a/public/js/vue-directive-mousewheel.js
+++ b/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')
     }
   })
 }
diff --git a/public/js/vue-directive-resize.js b/public/js/vue-directive-resize.js
index 4a164f4..e3c2da1 100644
--- a/public/js/vue-directive-resize.js
+++ b/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)
+      })
     }
   })
 }
diff --git a/src/App.vue b/src/App.vue
index bf427a4..095e681 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,5 +31,6 @@ export default {
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
+  height: 1000px;
 }
 </style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 96cc727..c50eb60 100644
--- a/src/components/HelloWorld.vue
+++ b/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;
 }