chore(Swipe): use relation mixin

src/image-preview/test/__snapshots__/index.spec.js.snap

@@ -1,15 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`cover slot 1`] = `
-<div class="van-image-preview" name="van-fade">
-  <div class="van-swipe van-image-preview__swipe">
-    <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
-  </div>
-  <div class="van-image-preview__index">1 / 0</div>
-  <div class="van-image-preview__cover">Custom Cover Content</div>
-</div>
-`;
-
 exports[`close-icon prop 1`] = `
 <div class="van-image-preview" name="van-fade"><i role="button" class="van-icon van-icon-close van-image-preview__close-icon van-image-preview__close-icon--top-right">
     <!----></i>
@@ -30,6 +20,16 @@ exports[`close-icon-position prop 1`] = `
 </div>
 `;
 
+exports[`cover slot 1`] = `
+<div class="van-image-preview" name="van-fade">
+  <div class="van-swipe van-image-preview__swipe">
+    <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
+  </div>
+  <div class="van-image-preview__index">1 / 0</div>
+  <div class="van-image-preview__cover">Custom Cover Content</div>
+</div>
+`;
+
 exports[`index slot 1`] = `
 <div class="van-image-preview" name="van-fade">
   <div class="van-swipe van-image-preview__swipe">
@@ -112,7 +112,7 @@ exports[`set show-index prop to false 1`] = `
 exports[`zoom 1`] = `
 <div class="van-image-preview" name="van-fade">
   <div class="van-swipe van-image-preview__swipe">
-    <div class="van-swipe__track" style="transition-duration: 500ms; width: 0px; transform: translateX(0px);">
+    <div class="van-swipe__track" style="width: 300px; transition-duration: 0ms; transform: translateX(0px);">
       <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">
         <div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale3d(2, 2, 1) translate(0px, NaNpx);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
           <div class="van-image__loading">

src/swipe-item/index.js

@@ -1,24 +1,19 @@
 import { createNamespace } from '../utils';
+import { ChildrenMixin } from '../mixins/relation';
 
 const [createComponent, bem] = createNamespace('swipe-item');
 
 export default createComponent({
+  mixins: [ChildrenMixin('vanSwipe')],
+
   data() {
     return {
       offset: 0,
     };
   },
 
-  beforeCreate() {
-    this.$parent.swipes.push(this);
-  },
-
-  destroyed() {
-    this.$parent.swipes.splice(this.$parent.swipes.indexOf(this), 1);
-  },
-
   render() {
-    const { vertical, computedWidth, computedHeight } = this.$parent;
+    const { vertical, computedWidth, computedHeight } = this.parent;
 
     const style = {
       width: computedWidth + 'px',

src/swipe/index.js

@@ -7,6 +7,7 @@ import { range } from '../utils/format/number';
 
 // Mixins
 import { TouchMixin } from '../mixins/touch';
+import { ParentMixin } from '../mixins/relation';
 import { BindEventMixin } from '../mixins/bind-event';
 
 const [createComponent, bem] = createNamespace('swipe');
@@ -14,6 +15,7 @@ const [createComponent, bem] = createNamespace('swipe');
 export default createComponent({
   mixins: [
     TouchMixin,
+    ParentMixin('vanSwipe'),
     BindEventMixin(function(bind, isBind) {
       bind(window, 'resize', this.resize, true);
       bind(window, 'visibilitychange', this.onVisibilityChange);
@@ -66,13 +68,12 @@ export default createComponent({
       active: 0,
       deltaX: 0,
       deltaY: 0,
-      swipes: [],
       swiping: false,
     };
   },
 
   watch: {
-    swipes() {
+    children() {
       this.initialize();
     },
 
@@ -91,7 +92,7 @@ export default createComponent({
 
   computed: {
     count() {
-      return this.swipes.length;
+      return this.children.length;
     },
 
     delta() {
@@ -159,7 +160,7 @@ export default createComponent({
       this.swiping = true;
       this.active = active;
       this.offset = this.count > 1 ? -this.size * this.active : 0;
-      this.swipes.forEach(swipe => {
+      this.children.forEach(swipe => {
         swipe.offset = 0;
       });
       this.autoPlay();
@@ -241,7 +242,7 @@ export default createComponent({
     },
 
     move({ pace = 0, offset = 0, emitChange }) {
-      const { loop, count, active, swipes, trackSize, minOffset } = this;
+      const { loop, count, active, children, trackSize, minOffset } = this;
 
       if (count <= 1) {
         return;
@@ -252,14 +253,14 @@ export default createComponent({
 
       // auto move first and last swipe in loop mode
       if (loop) {
-        if (swipes[0]) {
+        if (children[0]) {
           const outRightBound = targetOffset < minOffset;
-          swipes[0].offset = outRightBound ? trackSize : 0;
+          children[0].offset = outRightBound ? trackSize : 0;
         }
 
-        if (swipes[count - 1]) {
+        if (children[count - 1]) {
           const outLeftBound = targetOffset > 0;
-          swipes[count - 1].offset = outLeftBound ? -trackSize : 0;
+          children[count - 1].offset = outLeftBound ? -trackSize : 0;
         }
       }