From a6b4fe5a7b50d1d27b095a593a12a1bde44150b9 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Wed, 5 Apr 2017 14:34:32 +0800
Subject: [PATCH] lazyload

---
 docs/examples-dist/actionsheet.vue |  13 ++-
 docs/examples-dist/dialog.vue      |   7 +-
 docs/examples-dist/lazyload.vue    |  78 +++++++++++++
 docs/examples-dist/swipe.vue       |  29 +++--
 docs/examples-docs/lazyload.md     | 169 +++++++++++++++++++++++++++++
 docs/examples-docs/swipe.md        |  27 +++--
 docs/examples.js                   |   3 +
 docs/index.js                      |   3 +
 docs/nav.config.json               |   4 +
 package.json                       |   3 +-
 packages/lazyload/index.js         |  82 +-------------
 11 files changed, 314 insertions(+), 104 deletions(-)
 create mode 100644 docs/examples-dist/lazyload.vue
 create mode 100644 docs/examples-docs/lazyload.md

diff --git a/docs/examples-dist/actionsheet.vue b/docs/examples-dist/actionsheet.vue
index 7a2418f86..80300646d 100644
--- a/docs/examples-dist/actionsheet.vue
+++ b/docs/examples-dist/actionsheet.vue
@@ -5,6 +5,8 @@
 <zan-actionsheet v-model="show1" :actions="actions1">
 </zan-actionsheet>
 
+
+
               </example-block><example-block title="带取消按钮的ActionSheet">
                 <div class="zan-row">
   <zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
@@ -12,6 +14,8 @@
 <zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
 </zan-actionsheet>
 
+
+
               </example-block><example-block title="带标题的ActionSheet">
                 <div class="zan-row">
   <zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
@@ -53,7 +57,8 @@ export default {
       actions1: [
         {
           name: '微信安全支付',
-          className: 'actionsheet-wx'
+          className: 'actionsheet-wx',
+          callback: this.handleActionClick
         },
         {
           name: '支付宝支付',
@@ -71,6 +76,12 @@ export default {
         }
       ]
     };
+  },
+
+  methods: {
+    handleActionClick(item) {
+      console.log(item);
+    }
   }
 }
 </script>
\ No newline at end of file
diff --git a/docs/examples-dist/dialog.vue b/docs/examples-dist/dialog.vue
index 54c15ce68..d71062379 100644
--- a/docs/examples-dist/dialog.vue
+++ b/docs/examples-dist/dialog.vue
@@ -1,7 +1,10 @@
-<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="基础用法">
+<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="消息提示">
                 <zan-button @click="handleAlertClick">alert</zan-button>
 
-<zan-button @click="handleConfirmClick">confirm</zan-button>
+
+
+              </example-block><example-block title="消息确认">
+                <zan-button @click="handleConfirmClick">confirm</zan-button>
 
 
 
diff --git a/docs/examples-dist/lazyload.vue b/docs/examples-dist/lazyload.vue
new file mode 100644
index 000000000..f3bb7137d
--- /dev/null
+++ b/docs/examples-dist/lazyload.vue
@@ -0,0 +1,78 @@
+<template><section class="demo-lazyload"><h1 class="demo-title">lazyload</h1><example-block title="基础用法">
+                <ul class="image-list" ref="container">
+  <li v-for="img in imageList">
+    <img class="lazy-img" v-lazy="img">
+  </li>
+</ul>
+
+
+
+              </example-block><example-block title="背景图懒加载">
+                <ul class="image-list" ref="container">
+  <li v-for="img in backgroundImageList">
+    <div class="lazy-background" v-lazy:background-image="img"></div>
+  </li>
+</ul>
+
+
+
+              </example-block><example-block title="懒加载模块">
+                <lazy-component @show="handleComponentShow">
+  <ul class="image-list">
+    <li v-for="img in componentImageList">
+      <img class="lazy-img" v-lazy="img">
+    </li>
+  </ul>
+</lazy-component>
+
+
+
+              </example-block></section></template>
+<style>
+@component-namespace demo {
+  @b lazyload {
+    .lazy-img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+
+    .lazy-background {
+      height: 300px;
+      background-size: cover;
+      background-repeat: no-repeat;
+    }
+  }
+}
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+export default {
+  data() {
+    return {
+      imageList: [
+        'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
+        'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL',
+        'https://img.yzcdn.cn/upload_files/2016/01/27/FpWD3kX18w8qjM6faH-4JqOWHsF4',
+        'https://img.yzcdn.cn/upload_files/2016/09/08/9ff28d555e5760fa830344f12efa0087.jpg',
+        'https://img.yzcdn.cn/upload_files/2016/11/13/FlZIeSgbSANSPkmUHttMjoIgY3cv.jpg',
+        'https://img.yzcdn.cn/upload_files/2016/12/12/FuxgsGPRnupGu_eaMuaR8W0DuSKp.jpeg'
+      ],
+      backgroundImageList: [
+        'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
+        'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL'
+      ],
+      componentImageList: [
+        'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
+        'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
+      ]
+    };
+  },
+
+  methods: {
+    handleComponentShow() {
+      console.log('component show');
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/docs/examples-dist/swipe.vue b/docs/examples-dist/swipe.vue
index 4ddd3719d..2cdfc8a7d 100644
--- a/docs/examples-dist/swipe.vue
+++ b/docs/examples-dist/swipe.vue
@@ -1,20 +1,14 @@
 <template><section class="demo-swipe"><h1 class="demo-title">swipe</h1><example-block title="基础用法">
                 <zan-swipe>
-  <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
-  </zan-swipe-item>
-  <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+  <zan-swipe-item v-for="img in images">
+    <img v-lazy="img" alt="">
   </zan-swipe-item>
 </zan-swipe>
 
               </example-block><example-block title="自动轮播">
-                <zan-swipe :auto-play="true" @pagechange:end="handlePageEnd">
-  <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
-  </zan-swipe-item>
-  <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+                <zan-swipe auto-play="" @pagechange:end="handlePageEnd">
+  <zan-swipe-item v-for="img in autoImages">
+    <img v-lazy="img" alt="">
   </zan-swipe-item>
 </zan-swipe>
 
@@ -35,6 +29,19 @@
 <script>
 import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
+  data() {
+    return {
+      autoImages: [
+        'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
+        'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
+      ],
+      images: [
+        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
+      ]
+    };
+  },
+
   methods: {
     handlePageEnd(page, index) {
       console.log(page, index);
diff --git a/docs/examples-docs/lazyload.md b/docs/examples-docs/lazyload.md
new file mode 100644
index 000000000..bd5cf0aec
--- /dev/null
+++ b/docs/examples-docs/lazyload.md
@@ -0,0 +1,169 @@
+<style>
+@component-namespace demo {
+  @b lazyload {
+    .lazy-img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+
+    .lazy-background {
+      height: 300px;
+      background-size: cover;
+      background-repeat: no-repeat;
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      imageList: [
+        'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
+        'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL',
+        'https://img.yzcdn.cn/upload_files/2016/01/27/FpWD3kX18w8qjM6faH-4JqOWHsF4',
+        'https://img.yzcdn.cn/upload_files/2016/09/08/9ff28d555e5760fa830344f12efa0087.jpg',
+        'https://img.yzcdn.cn/upload_files/2016/11/13/FlZIeSgbSANSPkmUHttMjoIgY3cv.jpg',
+        'https://img.yzcdn.cn/upload_files/2016/12/12/FuxgsGPRnupGu_eaMuaR8W0DuSKp.jpeg'
+      ],
+      backgroundImageList: [
+        'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
+        'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL'
+      ],
+      componentImageList: [
+        'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
+        'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
+      ]
+    };
+  },
+
+  methods: {
+    handleComponentShow() {
+      console.log('component show');
+    }
+  }
+}
+</script>
+
+## Lazyload 图片懒加载
+
+### 使用指南
+
+`Lazyload`是`Vue`指令，所以需要使用它必须将它注册到`Vue`的指令中。
+
+```js
+import Vue from 'vue';
+import { Lazyload } from '@youzan/zanui-vue';
+
+Vue.use(Lazyload, options);
+```
+
+### 代码演示
+
+#### 基础用法
+
+比如商品详情页很多图片的情况需要对图片进行懒加载，只需将`v-lazy`指令的值设置为你需要懒加载的图片。
+
+:::demo 基础用法
+```html
+<ul class="image-list" ref="container">
+  <li v-for="img in imageList">
+    <img class="lazy-img" v-lazy="img">
+  </li>
+</ul>
+
+<script>
+export default {
+  data() {
+    return {
+      imageList: [
+        'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
+        'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL',
+        'https://img.yzcdn.cn/upload_files/2016/01/27/FpWD3kX18w8qjM6faH-4JqOWHsF4',
+        'https://img.yzcdn.cn/upload_files/2016/09/08/9ff28d555e5760fa830344f12efa0087.jpg',
+        'https://img.yzcdn.cn/upload_files/2016/11/13/FlZIeSgbSANSPkmUHttMjoIgY3cv.jpg',
+        'https://img.yzcdn.cn/upload_files/2016/12/12/FuxgsGPRnupGu_eaMuaR8W0DuSKp.jpeg'
+      ]
+    };
+  }
+}
+</script>
+```
+:::
+
+#### 背景图懒加载
+
+和图片懒加载不同的背景图懒加载需要使用`v-lazy:background-image`，值设置为背景图片的地址。还有一个需要注意的是你需要设置容器的样式，否则高度不会撑开。
+
+:::demo 背景图懒加载
+```html
+<ul class="image-list" ref="container">
+  <li v-for="img in backgroundImageList">
+    <div class="lazy-background" v-lazy:background-image="img"></div>
+  </li>
+</ul>
+
+<script>
+export default {
+  data() {
+    return {
+      backgroundImageList: [
+        'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
+        'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL'
+      ]
+    };
+  }
+}
+</script>
+```
+:::
+
+#### 懒加载模块
+
+懒加载模块需要使用到`lazy-component`，将需要懒加载的内容放在`lazy-component`中即可。
+
+:::demo 懒加载模块
+```html
+<lazy-component @show="handleComponentShow">
+  <ul class="image-list">
+    <li v-for="img in componentImageList">
+      <img class="lazy-img" v-lazy="img">
+    </li>
+  </ul>
+</lazy-component>
+
+<script>
+export default {
+  data() {
+    return {
+      componentImageList: [
+        'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
+        'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
+      ]
+    };
+  },
+
+  methods: {
+    handleComponentShow() {
+      console.log('component show');
+    }
+  }
+}
+</script>
+```
+:::
+
+### Options
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| loading | 加载时的图片 | `string`  |  |   |
+| error | 错误时的图片 | `string`  |  |   |
+| preload | 预加载高度的比例 | `string`  |  |   |
+| attempt | 尝试次数 | `number`  | `3` |   |
+| listenEvents | 监听的事件 | `Array`  | `['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']` |   |
+| adapter | 适配器 | `Object`  |  |   |
+| filter | 图片url过滤 | `Object`  |  |   |
+| lazyComponent | 是否能懒加载模块 | `boolean`  | `false` |   |
diff --git a/docs/examples-docs/swipe.md b/docs/examples-docs/swipe.md
index 6b6447517..47f125708 100644
--- a/docs/examples-docs/swipe.md
+++ b/docs/examples-docs/swipe.md
@@ -14,6 +14,19 @@
 
 <script>
 export default {
+  data() {
+    return {
+      autoImages: [
+        'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
+        'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
+      ],
+      images: [
+        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
+      ]
+    };
+  },
+
   methods: {
     handlePageEnd(page, index) {
       console.log(page, index);
@@ -63,11 +76,8 @@ export default {
 :::demo 基础用法
 ```html
 <zan-swipe>
-  <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
-  </zan-swipe-item>
-  <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+  <zan-swipe-item v-for="img in images">
+    <img v-lazy="img" alt="">
   </zan-swipe-item>
 </zan-swipe>
 ```
@@ -80,11 +90,8 @@ export default {
 :::demo 自动轮播
 ```html
 <zan-swipe auto-play @pagechange:end="handlePageEnd">
-  <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
-  </zan-swipe-item>
-  <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+  <zan-swipe-item v-for="img in autoImages">
+    <img v-lazy="img" alt="">
   </zan-swipe-item>
 </zan-swipe>
 ```
diff --git a/docs/examples.js b/docs/examples.js
index 4272848cf..8d6ac10af 100644
--- a/docs/examples.js
+++ b/docs/examples.js
@@ -10,6 +10,9 @@ import 'packages/zanui-css/src/index.css';
 import DemoList from './components/demo-list.vue';
 
 Vue.use(ZanUI);
+Vue.use(ZanUI.Lazyload, {
+  lazyComponent: true
+});
 Vue.use(VueRouter);
 
 let routesConfig = routes(navConfig, true);
diff --git a/docs/index.js b/docs/index.js
index 4cfc2b19e..0869d5632 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -18,6 +18,9 @@ function isMobile() {
 
 Vue.use(VueRouter);
 Vue.use(ZanUI);
+Vue.use(ZanUI.Lazyload, {
+  lazyComponent: true
+});
 Vue.component('side-nav', SideNav);
 Vue.component('demo-block', DemoBlock);
 Vue.component('footer-nav', FooterNav);
diff --git a/docs/nav.config.json b/docs/nav.config.json
index 858ca9306..8aae361f9 100644
--- a/docs/nav.config.json
+++ b/docs/nav.config.json
@@ -95,6 +95,10 @@
             {
               "path": "/image-preview",
               "title": "ImagePreview 图片预览"
+            },
+            {
+              "path": "/lazyload",
+              "title": "Lazyload 图片懒加载"
             }
           ]
         },
diff --git a/package.json b/package.json
index 35ff57ad5..c2070d559 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,8 @@
   "author": "youzanfe",
   "license": "ISC",
   "dependencies": {
-    "raf.js": "0.0.4"
+    "raf.js": "0.0.4",
+    "vue-lazyload": "^1.0.3"
   },
   "peerDependencies": {
     "vue": "2.1.8"
diff --git a/packages/lazyload/index.js b/packages/lazyload/index.js
index 6f6f48f56..3ce88f05a 100644
--- a/packages/lazyload/index.js
+++ b/packages/lazyload/index.js
@@ -1,79 +1,3 @@
-export default {
-  install: function(Vue, options) {
-    options = options || { fade: false, nohori: false };
-    // scroll结束的时候触发scrollend事件
-    var timer = null;
-    var topValue = 0;
-    var bodyEle = document.body;
-    var scrollEnd = document.createEvent('HTMLEvents');
-    scrollEnd.initEvent('scrollEnd', true, false);
-    function enterFrame() {
-      if (bodyEle.scrollTop === topValue) {
-        window.cancelAnimationFrame(timer);
-        window.dispatchEvent(scrollEnd);
-      } else {
-        topValue = bodyEle.scrollTop;
-      }
-      window.requestAnimationFrame(enterFrame);
-    }
-    document.addEventListener('scroll', function() {
-      if (!timer) {
-        timer = window.requestAnimationFrame(enterFrame);
-      }
-    }, true);
-    // vue指令
-    function update(value) {
-      if (!value) {
-        return;
-      }
-      var isFadeIn = this.modifiers.fade || options.fade;
-      var isNoHori = this.modifiers.nohori || options.nohori;
-        // 用css3来控制过渡效果
-      if (isFadeIn) {
-        this.el.style.opacity = 0;
-        this.el.style.transition = 'opacity .3s';
-        this.el.style.webkitTransition = 'opacity .3s';
-      }
-      var compute = function() {
-        if (this.el === null) {
-          return;
-        }
-        var rect = this.el.getBoundingClientRect();
-        var vpWidth = document.head.parentNode.clientWidth;
-        var vpHeight = document.head.parentNode.clientHeight;
-        var loadImg = function() {
-          this.el.src = value;
-          this.el.addEventListener('load', onloadEnd);
-          window.removeEventListener('scrollEnd', compute, true);
-          window.removeEventListener('resize', compute, true);
-        }.bind(this);
-        if (this.el.src === value) return;
-        if (isNoHori) {
-          if (rect.bottom >= 0 && rect.top <= vpHeight) {
-            loadImg();
-          }
-        } else if (rect.bottom >= 0 && rect.top <= vpHeight && rect.right >= 0 && rect.left <= vpWidth) {
-          loadImg();
-        }
-      }.bind(this);
-      var onload = function() {
-        compute();
-        this.el && this.el.removeEventListener('load', onload);
-        window.addEventListener('scrollEnd', compute, true);
-        window.addEventListener('resize', compute, true);
-      }.bind(this);
-      var onloadEnd = function() {
-        if (this.el === null) {
-          return;
-        }
-        if (isFadeIn) {
-          this.el.style.opacity = 1;
-        }
-        this.el.removeEventListener('load', onloadEnd);
-      }.bind(this);
-        // 元素load触发事件
-      this.el.addEventListener('load', onload);
-    }
-    Vue.directive('lazyload', update);
-  }
-};
+import Lazyload from 'vue-lazyload';
+
+export default Lazyload;