diff --git a/docs/demos/views/image-preview.vue b/docs/demos/views/image-preview.vue
index 7e81eed84..13f994cf9 100644
--- a/docs/demos/views/image-preview.vue
+++ b/docs/demos/views/image-preview.vue
@@ -7,6 +7,10 @@
     <demo-block :title="$t('button2')">
       <van-button @click="showImagePreview(1)">{{ $t('button2') }}</van-button>
     </demo-block>
+
+    <demo-block :title="$t('button3')">
+      <van-button @click="showImagePreview(0, 1000)">{{ $t('button3') }}</van-button>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -17,21 +21,29 @@ export default {
   i18n: {
     'zh-CN': {
       button1: '预览图片',
-      button2: '指定初始位置'
+      button2: '指定初始位置',
+      button3: '手动关闭'
     },
     'en-US': {
       button1: 'Show Images',
-      button2: 'Custom Start Position'
+      button2: 'Custom Start Position',
+      button3: 'Close Manually'
     }
   },
 
   methods: {
-    showImagePreview(position) {
-      ImagePreview([
+    showImagePreview(position, timer) {
+      const instance = ImagePreview([
         'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
         'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
         'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
       ], typeof position === 'number' ? position : 0);
+
+      if (timer) {
+        setTimeout(() => {
+          instance.close();
+        }, timer);
+      }
     }
   }
 };
diff --git a/docs/markdown/en-US/image-preview.md b/docs/markdown/en-US/image-preview.md
index 5fa8bd555..79d874435 100644
--- a/docs/markdown/en-US/image-preview.md
+++ b/docs/markdown/en-US/image-preview.md
@@ -25,6 +25,19 @@ ImagePreview([
 ], 1);
 ```
 
+#### Close Manually
+
+```javascript
+const instance = ImagePreview([
+  'https://img.yzcdn.cn/1.jpg',
+  'https://img.yzcdn.cn/2.jpg'
+]);
+
+setTimeout(() => {
+  instance.close();
+}, 1000);
+```
+
 ### Arguments
 
 | Attribute | Description | Type |
diff --git a/docs/markdown/zh-CN/image-preview.md b/docs/markdown/zh-CN/image-preview.md
index 539965323..cf6e8bc1d 100644
--- a/docs/markdown/zh-CN/image-preview.md
+++ b/docs/markdown/zh-CN/image-preview.md
@@ -28,6 +28,19 @@ ImagePreview([
 ], 1);
 ```
 
+#### 手动关闭
+
+```javascript
+const instance = ImagePreview([
+  'https://img.yzcdn.cn/1.jpg',
+  'https://img.yzcdn.cn/2.jpg'
+]);
+
+setTimeout(() => {
+  instance.close();
+}, 1000);
+```
+
 ### 方法参数
 
 | 参数名 | 说明 | 类型 |
diff --git a/packages/image-preview/image-preview.vue b/packages/image-preview/image-preview.vue
index 84ecdb22e..5c5c4247d 100644
--- a/packages/image-preview/image-preview.vue
+++ b/packages/image-preview/image-preview.vue
@@ -66,7 +66,7 @@ export default {
       // prevent long tap to close component
       const deltaTime = new Date() - this.touchStartTime;
       if (deltaTime < 100 && Math.abs(this.deltaX) < 20 && Math.abs(this.deltaY) < 20) {
-        this.value = false;
+        this.close();
       }
     }
   }
diff --git a/packages/image-preview/index.js b/packages/image-preview/index.js
index 59c56d841..0110b3739 100644
--- a/packages/image-preview/index.js
+++ b/packages/image-preview/index.js
@@ -20,6 +20,11 @@ const ImagePreviewBox = (images, startPosition = 0) => {
   instance.images = images;
   instance.startPosition = startPosition;
   instance.value = true;
+  instance.$on('input', show => {
+    instance.value = show;
+  });
+
+  return instance;
 };
 
 export default ImagePreviewBox;
diff --git a/packages/mixins/popup/popup-manager.js b/packages/mixins/popup/popup-manager.js
index dda1bceeb..4da186d7f 100644
--- a/packages/mixins/popup/popup-manager.js
+++ b/packages/mixins/popup/popup-manager.js
@@ -32,7 +32,7 @@ const PopupManager = {
     }
   },
 
-  openModal({id, zIndex, dom, extraClass, extraStyle}) {
+  openModal({ id, zIndex, dom, extraClass, extraStyle }) {
     const { modalStack } = context;
     const exist = modalStack.some(item => item.id === id);
 
diff --git a/test/unit/specs/image-preview.spec.js b/test/unit/specs/image-preview.spec.js
index 1177d544c..aa04a5218 100644
--- a/test/unit/specs/image-preview.spec.js
+++ b/test/unit/specs/image-preview.spec.js
@@ -34,6 +34,9 @@ describe('ImagePreview', () => {
     wrapper = mount(ImagePreviewVue);
     wrapper.vm.images = images;
     wrapper.vm.value = true;
+    wrapper.vm.$on('input', val => {
+      wrapper.vm.value = val;
+    });
 
     expect(wrapper.hasClass('van-image-preview')).to.be.true;