fix LazyLoader & remove cilck

src/components/WeiboHeader.vue

@@ -1,14 +1,14 @@
 <template>
   <div id="weibo-header">
     <div id="header-row1">
-      <div id="header-user-icon" v-authority="authorityCheck" @click.capture.stop="turnToUserHome" class="header-icon header-left-icon">
+      <div id="header-user-icon" v-authority="authorityCheck" @touchstart.capture.stop="turnToUserHome" class="header-icon header-left-icon">
         <Icon name="user"/>
       </div>
 
-      <div id="header-edit-icon" v-authority="authorityCheck" @click.capture.stop="turnToCompose" class="header-icon header-right-icon">
+      <div id="header-edit-icon" v-authority="authorityCheck" @touchstart.capture.stop="turnToCompose" class="header-icon header-right-icon">
         <Icon name="edit-square"/>
       </div>
-      <div id="header-message-icon" v-authority="authorityCheck" @click.capture.stop="turnToMessages" class="header-icon header-right-icon">
+      <div id="header-message-icon" v-authority="authorityCheck" @touchstart.capture.stop="turnToMessages" class="header-icon header-right-icon">
         <Icon name="mail"></Icon>
         <div id="messages-num">1</div>
       </div>
@@ -23,7 +23,7 @@
           class="component-selector"
           :key="item.id"
           :class="{actived: item.component===indexComponent}"
-          @click="changeIndexComponent(item.component)">
+          @touchstart="changeIndexComponent(item.component)">
         {{item.name}}
       </span>
     </div>

src/components/post/Post.vue

@@ -25,13 +25,13 @@
         :name="post.referenceOrign.name"></repost>
     <photo-container v-if="post.photos" class="photo-container" :photos="post.photos"></photo-container>
     <footer class="footer" ref="footer" v-authority="authorityCheck">
-      <div class="footer-button" @click.stop="addLike">
+      <div class="footer-button" @touchstart.stop="addLike">
         <div class="button-icon"><Icon name="like" :style="likeIconColor"></Icon></div><span class="button-description">{{post.like.num||"点赞"}}</span>
       </div>
-      <div class="footer-button" @click.stop="turnToComment">
+      <div class="footer-button" @touchstart.stop="turnToComment">
         <div class="button-icon"><Icon name="message"></Icon></div><span class="button-description">{{post.comment.num||"评论"}}</span>
       </div>
-      <div class="footer-button" @click.stop="turnToRepost">
+      <div class="footer-button" @touchstart.stop="turnToRepost">
         <div class="button-icon"><Icon name="share"></Icon></div><span class="button-description">{{post.repost.num||"转发"}}</span>
       </div>
     </footer>

src/directive/authority.js

@@ -3,20 +3,20 @@ const authority = {
   bind: function(el, binding, vnode) {
     const {requiredAuthority, currentAuthority, callback} = binding.value;
     if (requiredAuthority > currentAuthority) {
-      el.addEventListener('click', callback, {capture: true});
+      el.addEventListener('touchstart', callback, {capture: true});
     }
   },
   update: function(el, binding, vnode) {
     const {requiredAuthority, currentAuthority, callback} = binding.value;
     if (requiredAuthority > currentAuthority) {
-      el.addEventListener('click', callback, {capture: true});
+      el.addEventListener('touchstart', callback, {capture: true});
     } else {
-      el.removeEventListener('click', callback, {capture: true});
+      el.removeEventListener('touchstart', callback, {capture: true});
     }
   },
   unbind: function(el, binding, vnode) {
     const {callback} = binding.value;
-    el.removeEventListener('click', callback, {capture: true});
+    el.removeEventListener('touchstart', callback, {capture: true});
   },
 }
 

src/directive/lazy-load.js

@@ -5,7 +5,7 @@ const lazyLoadDirective = {
     vnode.$lazyLoader = new LazyLoader(el);
   },
   update (el, binding, vnode) {
-    // lazyLoader ? 1 : lazyLoader = new LazyLoader(el);
+    vnode.$lazyLoader.reset();
   },
   unbind (el, binding, vnode) {
     vnode.$lazyLoader.destory();

src/pages/compose/Compose.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="compose">
     <header id="compose-header">
-      <div id="compose-back"><a href="#" @click.prevent="turnBack"><Icon name="left"></Icon></a></div>
+      <div id="compose-back"><a href="#" @touchstart.prevent="turnBack"><Icon name="left"></Icon></a></div>
       <div id="compose-avatar-container">
         <img :src="user.avatar" alt="">
       </div>
       <div id="compose-send"><a href="#" 
-          @click.prevent="publish">发送</a></div>
+          @touchstart.prevent="publish">发送</a></div>
     </header>
     <main id="compose-edit-area">
       <textarea name="" id="compose-textarea"
@@ -19,7 +19,7 @@
           @select-image="selectImages"></photo-container>
     </main>
     <footer id="compose-footer">
-      <div class="icon-container" @click="selectImages"><Icon name="image"></Icon></div>
+      <div class="icon-container" @touchstart="selectImages"><Icon name="image"></Icon></div>
       <input type="file" accept="image/*"
           multiple
           ref="imageSelector"
@@ -86,7 +86,7 @@ export default {
       this.turnBack();
     },
     selectImages () {
-      this.$refs['imageSelector'].click();
+      this.$refs['imageSelector'].touchstart();
     },
     fillImages (event) {
       const files = Array.prototype.slice.call(event.target.files);

src/pages/compose/components/ComposePhotoContainer.vue

@@ -5,10 +5,10 @@
         <img :src="photo.src" alt="photo" @error="onImgLoadError">
       </div>
       <div  v-if="photos.length>1" class="delete-icon"
-          @click="deletePhoto(photo)"><Icon name="close"></Icon></div>
+          @touchstart="deletePhoto(photo)"><Icon name="close"></Icon></div>
     </div>
     <div class="warpper add-warpper" v-if="photos.length > 1 && photos.length < 9"
-        @click="addPhoto">
+        @touchstart="addPhoto">
       <div class="img-warpper">
         <Icon class="add-icon" name="plus"></Icon>
       </div>

src/pages/login/Login.vue

@@ -6,7 +6,7 @@
       <cus-field label="password" v-model="password" type="password"></cus-field>
       <button id="login-button"
 
-          @click.stop="login">
+          @touchstart.stop="login">
         登录
       </button>
     </div>

src/pages/message-view/MessageView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="message-view" @click="turnBack">
+  <div id="message-view" @touchstart="turnBack">
     <header id="message-view-header">
       <div class="icon-box">
         <Icon name="left"></Icon>

src/util/post-img-lazy-loader.js

@@ -49,7 +49,7 @@ class HTML5LazyLoader {
       const img = imgs[i];
       const src = img.getAttribute('data-src');
       if (src === img.getAttribute('src')) {
-        return;
+        continue;
       }
       img.setAttribute('src', src);
     }
@@ -62,6 +62,10 @@ class HTML5LazyLoader {
       this.element = null;
     }
   }
+
+  reset () {
+    this.init();
+  }
 }
 
 class StandardLazyLoader {
@@ -127,7 +131,7 @@ class StandardLazyLoader {
       const img = imgs[i];
       const src = img.getAttribute('data-src');
       if (src === img.getAttribute('src')) {
-        return;
+        continue;
       }
       img.setAttribute('src', src);
     }
@@ -137,6 +141,10 @@ class StandardLazyLoader {
     window.removeEventListener('scroll', this.elementLazyLoader, false);
     this.element = null;
   }
+
+  reset () {
+    this.init();
+  }
 }
 
 let LazyLoader = null;