feat(ImagePreview): add closeable prop (#5654)

src/image-preview/ImagePreview.js

@@ -12,6 +12,7 @@ import Image from '../image';
 import Swipe from '../swipe';
 import Loading from '../loading';
 import SwipeItem from '../swipe-item';
+import Icon from '../icon';
 
 const [createComponent, bem] = createNamespace('image-preview');
 
@@ -71,6 +72,15 @@ export default createComponent({
       type: String,
       default: bem('overlay'),
     },
+    closeable: Boolean,
+    closeIcon: {
+      type: String,
+      default: 'clear',
+    },
+    closeIconPosition: {
+      type: String,
+      default: 'top-right',
+    },
   },
 
   data() {
@@ -137,6 +147,12 @@ export default createComponent({
   },
 
   methods: {
+    emitClose() {
+      if (!this.asyncClose) {
+        this.$emit('input', false);
+      }
+    },
+
     onWrapperTouchStart() {
       this.touchStartTime = new Date();
     },
@@ -151,9 +167,7 @@ export default createComponent({
       if (deltaTime < 300 && offsetX < 10 && offsetY < 10) {
         if (!this.doubleClickTimer) {
           this.doubleClickTimer = setTimeout(() => {
-            if (!this.asyncClose) {
-              this.$emit('input', false);
-            }
+            this.emitClose();
 
             this.doubleClickTimer = null;
           }, 300);
@@ -331,6 +345,19 @@ export default createComponent({
         </Swipe>
       );
     },
+
+    genClose() {
+      if (this.closeable) {
+        return (
+          <Icon
+            role="button"
+            name={this.closeIcon}
+            class={bem('close-icon', this.closeIconPosition)}
+            onClick={this.emitClose}
+          />
+        );
+      }
+    },
   },
 
   render() {
@@ -341,6 +368,7 @@ export default createComponent({
     return (
       <transition name="van-fade">
         <div vShow={this.value} class={[bem(), this.className]}>
+          {this.genClose()}
           {this.genImages()}
           {this.genIndex()}
           {this.genCover()}