Feat Swipe handle own active logic (didi#325)

* chore(package.json): browserlist no ie option * feat(swipe): auto handle swipe-item active logic didi#307 * refactor(demo): swipe custom demo * test(swipe): fix opt test * docs(swipe): custom usage
GZhiDao1010 · Oct 10, 2018 · 95d9cf7 · 95d9cf7
1 parent 32a594d
commit 95d9cf7
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 68 deletions.
diff --git a/document/components/docs/en-US/swipe.md b/document/components/docs/en-US/swipe.md
@@ -122,8 +122,7 @@ In fact, our more common requirement is the need for a display of the content of
                 ref="swipeItem"
                 :btns="data.btns"
                 :index="index"
-                @btn-click="onBtnClick"
-                @active="onItemActive">
+                @btn-click="onBtnClick">
               <div @click="onItemClick(data.item, index)" class="item-inner">
                 <div class="icon">
                   <img width="60" height="60" :src="data.item.imgurl">
@@ -210,9 +209,6 @@ export default {
       ]
     }
   },
-  created() {
-    this.activeIndex = -1
-  },
   methods: {
     onItemClick(item) {
       console.log('click item:', item)
@@ -232,16 +228,6 @@ export default {
       } else {
         this.$refs.swipeItem[index].shrink()
       }
-    },
-    onItemActive(index) {
-      if (index === this.activeIndex) {
-        return
-      }
-      if (this.activeIndex !== -1) {
-        const activeItem = this.$refs.swipeItem[this.activeIndex]
-        activeItem.shrink()
-      }
-      this.activeIndex = index
     }
   }
 }

diff --git a/document/components/docs/zh-CN/swipe.md b/document/components/docs/zh-CN/swipe.md
@@ -122,8 +122,7 @@ export default {
                 ref="swipeItem"
                 :btns="data.btns"
                 :index="index"
-                @btn-click="onBtnClick"
-                @active="onItemActive">
+                @btn-click="onBtnClick">
               <div @click="onItemClick(data.item, index)" class="item-inner">
                 <div class="icon">
                   <img width="60" height="60" :src="data.item.imgurl">
@@ -210,9 +209,6 @@ export default {
       ]
     }
   },
-  created() {
-    this.activeIndex = -1
-  },
   methods: {
     onItemClick(item) {
       console.log('click item:', item)
@@ -232,16 +228,6 @@ export default {
       } else {
         this.$refs.swipeItem[index].shrink()
       }
-    },
-    onItemActive(index) {
-      if (index === this.activeIndex) {
-        return
-      }
-      if (this.activeIndex !== -1) {
-        const activeItem = this.$refs.swipeItem[this.activeIndex]
-        activeItem.shrink()
-      }
-      this.activeIndex = index
     }
   }
 }

diff --git a/example/pages/swipe/custom.vue b/example/pages/swipe/custom.vue
@@ -10,8 +10,7 @@
                     ref="swipeItem"
                     :btns="data.btns"
                     :index="index"
-                    @btn-click="onBtnClick"
-                    @active="onItemActive">
+                    @btn-click="onBtnClick">
                   <div @click="onItemClick(data.item, index)" class="item-inner">
                     <div class="icon">
                       <img width="60" height="60" :src="data.item.imgurl">
@@ -41,9 +40,6 @@
         swipeData: customData
       }
     },
-    created() {
-      this.activeIndex = -1
-    },
     methods: {
       onItemClick(item) {
         console.log('click item:', item)
@@ -63,16 +59,6 @@
         } else {
           this.$refs.swipeItem[index].shrink()
         }
-      },
-      onItemActive(index) {
-        if (index === this.activeIndex) {
-          return
-        }
-        if (this.activeIndex !== -1) {
-          const activeItem = this.$refs.swipeItem[this.activeIndex]
-          activeItem.shrink()
-        }
-        this.activeIndex = index
       }
     },
     components: {

diff --git a/package.json b/package.json
@@ -163,8 +163,7 @@
   },
   "browserslist": [
     "> 1%",
-    "last 2 versions",
-    "not ie <= 8",
+    "not ie <= 11",
     "Android >= 4.0",
     "iOS >= 8"
   ]

diff --git a/src/components/swipe/swipe-item.vue b/src/components/swipe/swipe-item.vue
@@ -6,7 +6,7 @@
        @touchend="onTouchEnd"
        class="cube-swipe-item">
     <slot>
-      <div @click="clickItem(item)" class="cube-swipe-item-inner border-bottom-1px">
+      <div @click="clickItem" class="cube-swipe-item-inner border-bottom-1px">
         <span>{{item.text}}</span>
       </div>
     </slot>
@@ -52,6 +52,7 @@
 
   export default {
     name: COMPONENT_NAME,
+    inject: ['swipe'],
     props: {
       item: {
         type: Object,
@@ -74,9 +75,17 @@
         default: false
       }
     },
+    watch: {
+      btns() {
+        this.$nextTick(() => {
+          this.refresh()
+        })
+      }
+    },
     created() {
       this.x = 0
       this.state = STATE_SHRINK
+      this.swipe.addItem(this)
     },
     mounted() {
       this.scrollerStyle = this.$refs.swipeItem.style
@@ -218,10 +227,12 @@
       genBtnStyl(btn) {
         return `background: ${btn.color}`
       },
-      clickItem(item) {
-        this.$emit(EVENT_ITEM_CLICK, item, this.index)
+      clickItem() {
+        this.swipe.onItemClick(this.item, this.index)
+        this.$emit(EVENT_ITEM_CLICK, this.item, this.index)
       },
       clickBtn(btn) {
+        this.swipe.onBtnClick(btn, this.index)
         this.$emit(EVENT_BTN_CLICK, btn, this.index)
         if (this.autoShrink) {
           this.shrink()
@@ -236,6 +247,7 @@
         }
       },
       onTouchStart(e) {
+        this.swipe.onItemActive(this.index)
         this.$emit(EVENT_ACTIVE, this.index)
         this.stop()
         this.moved = false
@@ -329,12 +341,8 @@
         this._translate(this.x)
       }
     },
-    watch: {
-      btns() {
-        this.$nextTick(() => {
-          this.refresh()
-        })
-      }
+    beforeDestroy() {
+      this.swipe.removeItem(this)
     }
   }
 </script>

diff --git a/src/components/swipe/swipe.vue b/src/components/swipe/swipe.vue
@@ -2,17 +2,12 @@
   <div class="cube-swipe">
     <slot>
       <transition-group name="cube-swipe" tag="ul">
-        <li v-for="(item,index) in data" :key="item.item.value">
+        <li v-for="(item, index) in data" :key="item.item.value">
           <cube-swipe-item
-              ref="swipeItem"
-              :btns="item.btns"
-              :item="item.item"
-              :index="index"
-              :auto-shrink="autoShrink"
-              @item-click="onItemClick"
-              @btn-click="onBtnClick"
-              @active="onItemActive">
-          </cube-swipe-item>
+            :btns="item.btns"
+            :item="item.item"
+            :index="index"
+            :auto-shrink="autoShrink" />
         </li>
       </transition-group>
     </slot>
@@ -28,6 +23,11 @@
 
   export default {
     name: COMPONENT_NAME,
+    provide() {
+      return {
+        swipe: this
+      }
+    },
     props: {
       data: {
         type: Array,
@@ -42,8 +42,16 @@
     },
     created() {
       this.activeIndex = -1
+      this.items = []
     },
     methods: {
+      addItem(item) {
+        this.items.push(item)
+      },
+      removeItem(item) {
+        const index = this.items.indexOf(item)
+        this.items.splice(index, 1)
+      },
       onItemClick(item, index) {
         this.$emit(EVENT_ITEM_CLICK, item, index)
       },
@@ -56,7 +64,7 @@
           return
         }
         if (this.activeIndex !== -1) {
-          const activeItem = this.$refs.swipeItem[this.activeIndex]
+          const activeItem = this.items[this.activeIndex]
           activeItem.shrink()
         }
         this.activeIndex = index

diff --git a/test/unit/specs/swipe.spec.js b/test/unit/specs/swipe.spec.js
@@ -414,7 +414,7 @@ describe('Swipe', () => {
   }
 
   function createSwipeContext(vm, index = 0) {
-    const swipeItemInstance = vm.$refs['swipeItem'][index]
+    const swipeItemInstance = vm.items[index]
     const swipeItem = swipeItemInstance.$el
     const btnGroup = swipeItem.querySelectorAll('.cube-swipe-btn')
     let btnWidth = 0