fix(ImagePreview): avoid Vue 2.6 event bubble issues

src/calendar/README.zh-CN.md

@@ -252,3 +252,11 @@ export default {
 | 方法名 | 说明 | 参数 | 返回值 |
 |------|------|------|------|
 | reset | 重置选中的日期到默认值 | - | - |
+
+## 常见问题
+
+### 在 iOS 系统上初始化组件失败？
+
+如果你遇到了在 iOS 上无法渲染组件的问题，请确认在创建 Date 对象时没有使用`new Date('2020-01-01')`这样的写法，iOS 不支持以中划线分隔的日期格式，正确写法是`new Date('2020/01/01')`。
+
+对此问题的详细解释：[stackoverflow](https://stackoverflow.com/questions/13363673/javascript-date-is-invalid-on-ios)。

src/image-preview/ImagePreview.js

@@ -1,6 +1,6 @@
 import { createNamespace } from '../utils';
 import { range } from '../utils/format/number';
-import { preventDefault } from '../utils/dom/event';
+import { on, preventDefault } from '../utils/dom/event';
 import { PopupMixin } from '../mixins/popup';
 import { TouchMixin } from '../mixins/touch';
 import Image from '../image';
@@ -98,18 +98,36 @@ export default createComponent({
 
   watch: {
     value(val) {
-      this.setActive(this.startPosition);
-
-      if (!val) {
+      if (val) {
+        this.setActive(this.startPosition);
+        this.$nextTick(() => {
+          this.$refs.swipe.swipeTo(this.startPosition, { immediate: true });
+        });
+      } else {
         this.$emit('close', {
           index: this.active,
           url: this.images[this.active]
         });
       }
     },
 
-    startPosition(active) {
-      this.setActive(active);
+    startPosition(val) {
+      this.setActive(val);
+    },
+
+    shouldRender: {
+      handler(val) {
+        if (val) {
+          this.$nextTick(() => {
+            const swipe = this.$refs.swipe.$el;
+            on(swipe, 'touchstart', this.onWrapperTouchStart);
+            on(swipe, 'touchmove', preventDefault);
+            on(swipe, 'touchend', this.onWrapperTouchEnd);
+            on(swipe, 'touchcancel', this.onWrapperTouchEnd);
+          });
+        }
+      },
+      immediate: true
     }
   },
 
@@ -283,10 +301,6 @@ export default createComponent({
           initialSwipe={this.startPosition}
           showIndicators={this.showIndicators}
           onChange={this.setActive}
-          nativeOnTouchstart={this.onWrapperTouchStart}
-          nativeOnTouchMove={preventDefault}
-          nativeOnTouchend={this.onWrapperTouchEnd}
-          nativeOnTouchcancel={this.onWrapperTouchEnd}
         >
           {this.images.map((image, index) => (
             <SwipeItem>
@@ -310,13 +324,13 @@ export default createComponent({
   },
 
   render() {
-    if (!this.value) {
+    if (!this.shouldRender) {
       return;
     }
 
     return (
       <transition name="van-fade">
-        <div class={[bem(), this.className]}>
+        <div vShow={this.value} class={[bem(), this.className]}>
           {this.genImages()}
           {this.genIndex()}
           {this.genCover()}

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

@@ -25,6 +25,8 @@ test('render image', async () => {
 
   expect(wrapper).toMatchSnapshot();
 
+  await later();
+
   const swipe = wrapper.find('.van-swipe__track');
   triggerDrag(swipe, 500, 0);
   expect(wrapper.emitted('input')).toBeFalsy();