support vue 2.0

easymomo · Oct 28, 2016 · e30aa6b · e30aa6b
1 parent 1762837
commit e30aa6b
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 66 deletions.
diff --git a/dist/vue-swipe.css b/dist/vue-swipe.css
diff --git a/dist/vue-swipe.js b/dist/vue-swipe.js
diff --git a/example/index.html b/example/index.html
@@ -28,23 +28,25 @@
   </style>
 </head>
 <body>
-  <swipe class="my-swipe">
-    <swipe-item class="slide1">Slide1</swipe-item>
-    <swipe-item class="slide2">Slide2</swipe-item>
-    <swipe-item class="slide3">Slide3</swipe-item>
-  </swipe>
-
-  <br>
-
-  <swipe class="my-swipe" :speed="900" :auto="0" :show-indicators="false">
-    <swipe-item class="slide1">SINGLE SLIDE</swipe-item>
-  </swipe>
-
-  <br>
-
-  <swipe class="my-swipe" :speed="900" :auto="0" :show-indicators="false" :no-drag="true">
-    <swipe-item class="slide1">SINGLE SLIDE</swipe-item>
-  </swipe>
+  <div id="container">
+    <swipe class="my-swipe">
+      <swipe-item class="slide1">Slide1</swipe-item>
+      <swipe-item class="slide2">Slide2</swipe-item>
+      <swipe-item class="slide3">Slide3</swipe-item>
+    </swipe>
+
+    <br>
+
+    <swipe class="my-swipe" :speed="900" :auto="0" :show-indicators="false">
+      <swipe-item class="slide1">SINGLE SLIDE</swipe-item>
+    </swipe>
+
+    <br>
+
+    <swipe class="my-swipe" :speed="900" :auto="0" :show-indicators="false" :no-drag="true">
+      <swipe-item class="slide1">SINGLE SLIDE</swipe-item>
+    </swipe>
+  </div>
 
   <script src="../node_modules/vue/dist/vue.js"></script>
   <script src="/dist/vue-swipe.js"></script>

diff --git a/example/index.js b/example/index.js
@@ -2,7 +2,7 @@ const vueSwipe = VueSwipe.Swipe;
 const vueSwipeItem = VueSwipe.SwipeItem;
 
 new Vue({
-  el: 'body',
+  el: '#container',
   components: {
     'swipe': vueSwipe,
     'swipe-item': vueSwipeItem

diff --git a/package.json b/package.json
@@ -25,9 +25,6 @@
   ],
   "author": "long.zhang@ele.me",
   "license": "MIT",
-  "peerDependencies": {
-    "vue": "^1.0.10"
-  },
   "devDependencies": {
     "babel-cli": "^6.3.15",
     "babel-core": "^6.3.15",
@@ -41,9 +38,10 @@
     "file-loader": "^0.8.5",
     "style-loader": "^0.13.0",
     "url-loader": "^0.5.7",
+    "vue": "^2.0.3",
     "vue-hot-reload-api": "^1.2.2",
     "vue-html-loader": "^1.0.0",
-    "vue-loader": "^7.3.0",
+    "vue-loader": "^9.7.0",
     "webpack": "^1.12.9",
     "webpack-dev-server": "^1.14.0"
   },

diff --git a/src/swipe-item.vue b/src/swipe-item.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="swipe-item">
+  <div class="mint-swipe-item">
     <slot></slot>
   </div>
 </template>
@@ -8,16 +8,12 @@
   export default {
     name: 'mt-swipe-item',
 
-    ready() {
-      this.$dispatch('swipeItemCreated', this);
-    },
-
-    detached() {
-      this.$dispatch('swipeItemDestroyed', this);
+    mounted() {
+      this.$parent && this.$parent.swipeItemCreated(this);
     },
 
     destroyed() {
-      this.$dispatch('swipeItemDestroyed', this);
+      this.$parent && this.$parent.swipeItemDestroyed(this);
     }
   };
 </script>
diff --git a/src/swipe.vue b/src/swipe.vue
@@ -1,37 +1,35 @@
 <style>
-  .swipe {
+  .mint-swipe {
     overflow: hidden;
     position: relative;
     height: 100%;
   }
-
-  .swipe-items-wrap {
+  .mint-swipe-items-wrap {
     position: relative;
     overflow: hidden;
     height: 100%;
   }
-
-  .swipe-items-wrap > div {
+  .mint-swipe-items-wrap > div {
     position: absolute;
+    -webkit-transform: translateX(-100%);
     transform: translateX(-100%);
     width: 100%;
     height: 100%;
-    display: none;
+    display: none
   }
-
-  .swipe-items-wrap > div.active {
+  .mint-swipe-items-wrap > div.is-active {
     display: block;
+    -webkit-transform: none;
     transform: none;
   }
-
-  .swipe-indicators {
+  .mint-swipe-indicators {
     position: absolute;
     bottom: 10px;
     left: 50%;
+    -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
   }
-
-  .swipe-indicator {
+  .mint-swipe-indicator {
     width: 8px;
     height: 8px;
     display: inline-block;
@@ -40,25 +38,27 @@
     opacity: 0.2;
     margin: 0 3px;
   }
-
-  .swipe-indicator.active {
+  .mint-swipe-indicator.is-active {
     background: #fff;
   }
 </style>
 
 <template>
-  <div class="swipe">
-    <div class="swipe-items-wrap" v-el:wrap>
+  <div class="mint-swipe">
+    <div class="mint-swipe-items-wrap" ref="wrap">
       <slot></slot>
     </div>
-    <div class="swipe-indicators" v-show="showIndicators">
-      <div class="swipe-indicator" v-for="page in pages" :class="{ active: $index === index }"></div>
+    <div class="mint-swipe-indicators" v-show="showIndicators">
+      <div class="mint-swipe-indicator"
+           v-for="(page, $index) in pages"
+           :class="{ 'is-active': $index === index }"></div>
     </div>
   </div>
 </template>
 
-<script type="text/ecmascript-6">
-  import { once, addClass, removeClass } from 'wind-dom';
+<script>
+  import { once } from 'wind-dom/src/event';
+  import { addClass, removeClass } from 'wind-dom/src/class';
 
   export default {
     name: 'mt-swipe',
@@ -113,7 +113,7 @@
       }
     },
 
-    events: {
+    methods: {
       swipeItemCreated() {
         if (!this.ready) return;
 
@@ -123,22 +123,22 @@
         }, 100);
       },
 
-      swipeItemDestroyed(){
+      swipeItemDestroyed() {
         if (!this.ready) return;
 
         clearTimeout(this.reInitTimer);
         this.reInitTimer = setTimeout(() => {
           this.reInitPages();
         }, 100);
-      }
-    },
+      },
 
-    methods: {
       translate(element, offset, speed, callback) {
         if (speed) {
           this.animating = true;
           element.style.webkitTransition = '-webkit-transform ' + speed + 'ms ease-in-out';
-          setTimeout(() => element.style.webkitTransform = `translate3d(${offset}px, 0, 0)`, 50);
+          setTimeout(() => {
+            element.style.webkitTransform = `translate3d(${offset}px, 0, 0)`;
+          }, 50);
 
           var called = false;
 
@@ -171,10 +171,10 @@
         children.forEach(function(child, index) {
           pages.push(child.$el);
 
-          removeClass(child.$el, 'active');
+          removeClass(child.$el, 'is-active');
 
           if (index === 0) {
-            addClass(child.$el, 'active');
+            addClass(child.$el, 'is-active');
           }
         });
 
@@ -243,8 +243,8 @@
         var callback = () => {
           if (newIndex !== undefined) {
             var newPage = this.$children[newIndex].$el;
-            removeClass(oldPage, 'active');
-            addClass(newPage, 'active');
+            removeClass(oldPage, 'is-active');
+            addClass(newPage, 'is-active');
 
             this.index = newIndex;
           }
@@ -298,7 +298,7 @@
         this.doAnimate('prev');
       },
 
-      doOnTouchStart: function(event) {
+      doOnTouchStart(event) {
         if (this.noDrag) return;
 
         var element = this.$el;
@@ -339,7 +339,7 @@
         }
       },
 
-      doOnTouchMove: function(event) {
+      doOnTouchMove(event) {
         if (this.noDrag) return;
 
         var dragState = this.dragState;
@@ -374,7 +374,7 @@
         }
       },
 
-      doOnTouchEnd: function() {
+      doOnTouchEnd() {
         if (this.noDrag) return;
 
         var dragState = this.dragState;
@@ -437,7 +437,7 @@
       }
     },
 
-    ready() {
+    mounted() {
       this.ready = true;
 
       if (this.auto > 0) {