fix(ImagePreview): close-on-popstate not work #7880

src/image-preview/ImagePreview.js

@@ -91,12 +91,16 @@ export default createComponent({
       emit('scale', args);
     };
 
+    const toggle = (show) => {
+      emit('update:show', show);
+    };
+
     const emitClose = () => {
       callInterceptor({
         interceptor: props.beforeClose,
         args: [state.active],
         done: () => {
-          emit('update:show', false);
+          toggle(false);
         },
       });
     };
@@ -211,6 +215,7 @@ export default createComponent({
         overlayClass={bem('overlay')}
         closeOnPopstate={props.closeOnPopstate}
         onClosed={onClosed}
+        {...{ 'onUpdate:show': toggle }}
       >
         {renderClose()}
         {renderImages()}

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

@@ -223,27 +223,6 @@ test('zoom out', async () => {
   restore();
 });
 
-test('closeOnPopstate', () => {
-  const wrapper = mount(ImagePreviewVue, {
-    props: {
-      images,
-      value: true,
-      closeOnPopstate: true,
-    },
-  });
-
-  trigger(window, 'popstate');
-  expect(wrapper.emitted('input')[0][0]).toBeFalsy();
-
-  wrapper.setProps({
-    value: true,
-    closeOnPopstate: false,
-  });
-
-  trigger(window, 'popstate');
-  expect(wrapper.emitted('input')[1]).toBeFalsy();
-});
-
 test('get container with function call ', async (done) => {
   const element = document.createElement('div');
   document.body.appendChild(element);

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

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 import ImagePreviewComponent from '../ImagePreview';
 import { later } from '../../../test';
+import { trigger } from '../../utils';
 
 const images = [
   'https://img.yzcdn.cn/1.png',
@@ -112,3 +113,28 @@ test('should hide index when show-index prop is false', async () => {
   await wrapper.setProps({ showIndex: false });
   expect(wrapper.find('.van-image-preview__index').exists()).toBeFalsy();
 });
+
+test('should hide ImagePreview after popstate', async () => {
+  const wrapper = mount(ImagePreviewComponent, {
+    props: {
+      images,
+      show: true,
+    },
+  });
+
+  trigger(window, 'popstate');
+  expect(wrapper.emitted('update:show')[0][0]).toBeFalsy();
+});
+
+test('should not hide ImagePreview after popstate when close-on-popstate is false', async () => {
+  const wrapper = mount(ImagePreviewComponent, {
+    props: {
+      images,
+      show: true,
+      closeOnPopstate: false,
+    },
+  });
+
+  trigger(window, 'popstate');
+  expect(wrapper.emitted('update:show')).toBeFalsy();
+});