feat(ImagePreview): enable close-on-popstate by default (#6875)

src/image-preview/ImagePreview.js

@@ -37,22 +37,10 @@ export default createComponent({
       type: Boolean,
       default: true,
     },
-    swipeDuration: {
-      type: [Number, String],
-      default: 500,
-    },
     overlay: {
       type: Boolean,
       default: true,
     },
-    showIndex: {
-      type: Boolean,
-      default: true,
-    },
-    startPosition: {
-      type: [Number, String],
-      default: 0,
-    },
     minZoom: {
       type: [Number, String],
       default: 1 / 3,
@@ -61,6 +49,18 @@ export default createComponent({
       type: [Number, String],
       default: 3,
     },
+    showIndex: {
+      type: Boolean,
+      default: true,
+    },
+    swipeDuration: {
+      type: [Number, String],
+      default: 500,
+    },
+    startPosition: {
+      type: [Number, String],
+      default: 0,
+    },
     overlayClass: {
       type: String,
       default: bem('overlay'),
@@ -69,6 +69,10 @@ export default createComponent({
       type: String,
       default: 'clear',
     },
+    closeOnPopstate: {
+      type: Boolean,
+      default: true,
+    },
     closeIconPosition: {
       type: String,
       default: 'top-right',

src/image-preview/README.md

@@ -109,7 +109,7 @@ export default {
 | onClose | Triggered when close | _Function_ | - |
 | onChange `v2.0.3` | Triggered when current image change | _Function_ | - |
 | onScale | Triggered when current image scale | _Function_ | - |
-| closeOnPopstate | Whether to close when popstate | _boolean_ | `false` |
+| closeOnPopstate | Whether to close when popstate | _boolean_ | `true` |
 | asyncClose | Whether to enable async close | _boolean_ | `false` |
 | className | Custom className | _any_ | - |
 | maxZoom | Max zoom | _number \| string_ | `3` |
@@ -130,7 +130,7 @@ export default {
 | show-indicators | Whether to show indicators | _boolean_ | `false` |
 | loop | Whether to enable loop | _boolean_ | `true` |
 | async-close | Whether to enable async close | _boolean_ | `false` |
-| close-on-popstate | Whether to close when popstate | _boolean_ | `false` |
+| close-on-popstate | Whether to close when popstate | _boolean_ | `true` |
 | class-name | Custom className | _any_ | - |
 | max-zoom | Max zoom | _number \| string_ | `3` |
 | min-zoom | Min zoom | _number \| string_ | `1/3` |

src/image-preview/README.zh-CN.md

@@ -144,7 +144,7 @@ export default {
 | onChange `v2.0.3` | 切换图片时的回调函数，回调参数为当前索引 | _Function_ | - |
 | onScale | 缩放图片时的回调函数，回调参数为当前索引和当前缩放值组成的对象 | _Function_ | - |
 | asyncClose | 是否开启异步关闭 | _boolean_ | `false` |
-| closeOnPopstate | 是否在页面回退时自动关闭 | _boolean_ | `false` |
+| closeOnPopstate | 是否在页面回退时自动关闭 | _boolean_ | `true` |
 | className | 自定义类名 | _any_ | - |
 | maxZoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` |
 | minZoom | 手势缩放时，最小缩放比例 | _number \| string_ | `1/3` |
@@ -166,7 +166,7 @@ export default {
 | show-indicators | 是否显示轮播指示器 | _boolean_ | `false` |
 | loop | 是否开启循环播放 | _boolean_ | `true` |
 | async-close | 是否开启异步关闭 | _boolean_ | `false` |
-| close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `false` |
+| close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `true` |
 | class-name | 自定义类名 | _any_ | - |
 | max-zoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` |
 | min-zoom | 手势缩放时，最小缩放比例 | _number \| string_ | `1/3` |

src/image-preview/demo/index.vue

@@ -88,7 +88,6 @@ export default {
         swipeDuration: 300,
         asyncClose: !!timer,
         closeable,
-        closeOnPopstate: true,
         startPosition: typeof position === 'number' ? position : 0,
       });
 

src/image-preview/index.js

@@ -6,23 +6,23 @@ let instance;
 
 const defaultConfig = {
   loop: true,
-  images: [],
   value: true,
-  minZoom: 1 / 3,
+  images: [],
   maxZoom: 3,
-  className: '',
+  minZoom: 1 / 3,
   onClose: null,
   onChange: null,
+  className: '',
   showIndex: true,
   closeable: false,
   closeIcon: 'clear',
   asyncClose: false,
+  getContainer: 'body',
   startPosition: 0,
   swipeDuration: 500,
   showIndicators: false,
-  closeOnPopstate: false,
+  closeOnPopstate: true,
   closeIconPosition: 'top-right',
-  getContainer: 'body',
 };
 
 const initInstance = () => {

src/sku/Sku.js

@@ -542,7 +542,6 @@ export default createComponent({
       ImagePreview({
         images: this.imageList,
         startPosition: index,
-        closeOnPopstate: true,
         onClose: () => {
           this.$emit('close-preview', params);
         },

src/uploader/index.js

@@ -258,7 +258,6 @@ export default createComponent({
       this.imagePreview = ImagePreview({
         images: imageContents,
         startPosition: imageFiles.indexOf(item),
-        closeOnPopstate: true,
         onClose: () => {
           this.$emit('close-preview');
         },