更新至Vue2.0

Author: bajian

README.md

@@ -1,5 +1,5 @@
 # slider 
-auto banner for more function
+auto banner for more function for Vue2.x
 
 ##demo
 

package.json

@@ -10,7 +10,7 @@
     "test": ""
   },
   "dependencies": {
-    "vue": "^1.0.21",
+    "vue": "^2.0.0",
     "babel-runtime": "^6.0.0"
   },
   "devDependencies": {
@@ -37,7 +37,7 @@
     "url-loader": "^0.5.7",
     "vue-hot-reload-api": "^1.2.0",
     "vue-html-loader": "^1.0.0",
-    "vue-loader": "^8.3.0",
+    "vue-loader": "^9.0.0",
     "vue-style-loader": "^1.0.0",
     "webpack": "^1.12.2",
     "webpack-dev-middleware": "^1.4.0",

src/App.vue

@@ -11,7 +11,7 @@
     @slide-revert-end="onSlideRevertEnd"
     @slider-move="onSliderMove">
 
-    <div v-for="slide in slides" track-by="$index">
+    <div v-for="(slide,index) in slides" :key="index">
       <a :href="slide.value">
         <img width="350" height="180" :src="slide.image" />
       </a>

src/components/vue-slider.vue

@@ -1,23 +1,23 @@
 <template>
     <div class="swiper"
-         :class="[direction, {'dragging': dragging}]"
-         @touchstart="_onTouchStart"
-         @wheel="_onWheel">
-        <div class="swiper-wrap"
-             v-el:swiper-wrap
-             :style="{'transform' : 'translate3d(' + translateX + 'px,' + translateY + 'px, 0)'}"
-             @transitionend="_onTransitionEnd">
-            <slot></slot>
-        </div>
-        <div class="swiper-pagination"
-             v-show="paginationVisible">
-            <span class="swiper-pagination-bullet"
-                  :class="{'active': $index+1===currentPage}"
-                  v-for="slide in slides"
-                   track-by="$index"
-                  @click="setPage($index+1)"></span>
-        </div>
-    </div>
+    :class="[direction, {'dragging': dragging}]"
+    @touchstart="_onTouchStart"
+    @wheel="_onWheel">
+    <div class="swiper-wrap"
+    ref="swiper-wrap"
+    :style="{'transform' : 'translate3d(' + translateX + 'px,' + translateY + 'px, 0)'}"
+    @transitionend="_onTransitionEnd">
+    <slot></slot>
+</div>
+<div class="swiper-pagination"
+v-show="paginationVisible">
+<span class="swiper-pagination-bullet"
+:class="{'active': index+1===currentPage}"
+v-for="(slide,index) in slides"
+:key="index"
+@click="setPage(index+1)"></span>
+</div>
+</div>
 </template>
 <script type="text/babel">
     const VERTICAL = 'vertical';
@@ -73,14 +73,16 @@
         },
         watch:{
             slides:function(){
-                this.slideEls = this.$els.swiperWrap.children;
+                this.slideEls = this.$refs['swiper-wrap'].children;
             }
         },
-        ready() {
-            this._onTouchMove = this._onTouchMove.bind(this);
-            this._onTouchEnd = this._onTouchEnd.bind(this);
-            this.slideEls = this.$els.swiperWrap.children;
-            this.autoBegin();
+        mounted(){
+            this.$nextTick(function () {
+                this._onTouchMove = this._onTouchMove.bind(this);
+                this._onTouchEnd = this._onTouchEnd.bind(this);
+                this.slideEls = this.$refs['swiper-wrap'].children;
+                this.autoBegin();
+            })
         },
         methods: {
 
@@ -129,8 +131,8 @@
                 //偏移的大小
                 this[translateName] = -[].reduce.call(this.slideEls, function (total, el, i) {
                 //previousValue,currentValue,currentIndex
-                    return i > page - 2 ? total : total + el[propName];
-                }, 0);
+                return i > page - 2 ? total : total + el[propName];
+            }, 0);
                 this._onTransitionStart();
                 this.autoBegin();
             },
@@ -238,36 +240,36 @@
 
 <style lang="less">
     .swiper {
-  position: relative;
-  overflow: hidden;
+      position: relative;
+      overflow: hidden;
 
-  .swiper-wrap {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    transition: all 0.5s ease;
+      .swiper-wrap {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        transition: all 0.4s ease;
 
-    > div {
-      overflow: hidden;
-      flex-shrink: 0;
-      width: 100%;
-      height: 100%;
-    }
+        > div {
+          overflow: hidden;
+          flex-shrink: 0;
+          width: 100%;
+          height: 100%;
+      }
   }
 
   &.horizontal .swiper-wrap {
     flex-direction: row;
-  }
+}
 
-  &.vertical .swiper-wrap {
+&.vertical .swiper-wrap {
     flex-direction: column;
-  }
+}
 
-  &.dragging .swiper-wrap {
+&.dragging .swiper-wrap {
     transition: none;
-  }
+}
 
-  .swiper-pagination {
+.swiper-pagination {
     position: absolute;
 
     .swiper-pagination-bullet {
@@ -277,35 +279,35 @@
       background-color: #000000;
       opacity: .2;
       cursor:pointer
-    }
+  }
 
-    .swiper-pagination-bullet.active {
+  .swiper-pagination-bullet.active {
       background: #007aff;
       opacity: 1;
-    }
   }
+}
 
-  &.vertical .swiper-pagination {
+&.vertical .swiper-pagination {
     right: 10px;
     top: 50%;
     transform: translate3d(0, -50%, 0);
 
     .swiper-pagination-bullet {
       display: block;
       margin: 3px 0;
-    }
   }
+}
 
-  &.horizontal .swiper-pagination {
+&.horizontal .swiper-pagination {
     bottom: 10px;
     width: 100%;
     text-align: center;
 
     .swiper-pagination-bullet {
       display: inline-block;
       margin: 0 3px;
-    }
   }
 }
+}
 
 </style>