From b572c7624598524cdbd5dd81e15f255252a79015 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Fri, 24 May 2019 20:13:21 +0800 Subject: [PATCH] [new feature] ImagePreview: add closeOnPopstate prop --- packages/image-preview/ImagePreview.js | 25 ++++++++++++++++++++++- packages/image-preview/demo/index.vue | 1 + packages/image-preview/en-US.md | 2 ++ packages/image-preview/index.js | 3 ++- packages/image-preview/test/index.spec.js | 21 +++++++++++++++++++ packages/image-preview/zh-CN.md | 2 ++ types/image-preview.d.ts | 1 + 7 files changed, 53 insertions(+), 2 deletions(-) diff --git a/packages/image-preview/ImagePreview.js b/packages/image-preview/ImagePreview.js index 14102ea02..2e32bf7dd 100644 --- a/packages/image-preview/ImagePreview.js +++ b/packages/image-preview/ImagePreview.js @@ -1,4 +1,4 @@ -import { use, range } from '../utils'; +import { use, range, isServer } from '../utils'; import { preventDefault } from '../utils/event'; import { PopupMixin } from '../mixins/popup'; import { TouchMixin } from '../mixins/touch'; @@ -26,6 +26,7 @@ export default sfc({ asyncClose: Boolean, startPosition: Number, showIndicators: Boolean, + closeOnPopstate: Boolean, loop: { type: Boolean, default: true @@ -57,6 +58,8 @@ export default sfc({ }, data() { + this.bindStatus = false; + return { scale: 1, moveX: 0, @@ -90,10 +93,30 @@ export default sfc({ startPosition(active) { this.active = active; + }, + + closeOnPopstate: { + handler(val) { + this.handlePopstate(val); + }, + immediate: true } }, methods: { + handlePopstate(bind) { + /* istanbul ignore if */ + if (isServer) { + return; + } + + if (this.bindStatus !== bind) { + this.bindStatus = bind; + const action = bind ? 'add' : 'remove'; + window[`${action}EventListener`]('popstate', this.close); + } + }, + onWrapperTouchStart() { this.touchStartTime = new Date(); }, diff --git a/packages/image-preview/demo/index.vue b/packages/image-preview/demo/index.vue index 165531130..4caac4afa 100644 --- a/packages/image-preview/demo/index.vue +++ b/packages/image-preview/demo/index.vue @@ -94,6 +94,7 @@ export default { const instance = ImagePreview({ images, asyncClose: !!timer, + closeOnPopstate: true, startPosition: typeof position === 'number' ? position : 0 }); diff --git a/packages/image-preview/en-US.md b/packages/image-preview/en-US.md index 292df473b..09c8f537b 100644 --- a/packages/image-preview/en-US.md +++ b/packages/image-preview/en-US.md @@ -95,6 +95,7 @@ export default { | showIndicators | Whether to show indicators | `Boolean` | `false` | | loop | Whether to enable loop | `Boolean` | `true` | | onClose | Close callback | `Function` | - | +| closeOnPopstate | Whether to close when popstate | `Boolean` | `false` | | asyncClose | Whether to enable async close | `Boolean` | `false` | | className | Custom className | `String | Array | Object` | - | | lazyLoad | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | `Boolean` | `false` | @@ -111,6 +112,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` | | class-name | Custom className | `String | Array | Object` | - | | lazy-load | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | `Boolean` | `false` | | max-zoom | Max zoom | `Number` | `3` | diff --git a/packages/image-preview/index.js b/packages/image-preview/index.js index 96e80a22e..fc6b3bde1 100644 --- a/packages/image-preview/index.js +++ b/packages/image-preview/index.js @@ -15,7 +15,8 @@ const defaultConfig = { showIndex: true, asyncClose: false, startPosition: 0, - showIndicators: false + showIndicators: false, + closeOnPopstate: false }; const initInstance = () => { diff --git a/packages/image-preview/test/index.spec.js b/packages/image-preview/test/index.spec.js index ddc70c880..b4860ffd4 100644 --- a/packages/image-preview/test/index.spec.js +++ b/packages/image-preview/test/index.spec.js @@ -116,3 +116,24 @@ test('index slot', () => { expect(wrapper).toMatchSnapshot(); }); + +test('closeOnPopstate', () => { + const wrapper = mount(ImagePreviewVue, { + propsData: { + 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(); +}); diff --git a/packages/image-preview/zh-CN.md b/packages/image-preview/zh-CN.md index fcc781c1f..a98553162 100644 --- a/packages/image-preview/zh-CN.md +++ b/packages/image-preview/zh-CN.md @@ -108,6 +108,7 @@ export default { | loop | 是否开启循环播放 | `Boolean` | `true` | 1.4.4 | | onClose | 关闭时的回调函数 | `Function` | - | 1.1.16 | | asyncClose | 是否开启异步关闭 | `Boolean` | `false` | 1.4.8 | +| closeOnPopstate | 是否在页面回退时自动关闭 | `Boolean` | `false` | 2.0.0 | | className | 自定义类名 | `String | Array | Object` | - | 1.5.2 | | lazyLoad | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | `Boolean` | `false` | 1.5.3 | | maxZoom | 手势缩放时，最大缩放比例 | `Number` | `3` | 1.6.14 | @@ -125,6 +126,7 @@ export default { | show-indicators | 是否显示轮播指示器 | `Boolean` | `false` | 1.3.10 | | loop | 是否开启循环播放 | `Boolean` | `true` | 1.4.4 | | async-close | 是否开启异步关闭 | `Boolean` | `false` | 1.4.8 | +| close-on-popstate | 是否在页面回退时自动关闭 | `Boolean` | `false` | | class-name | 自定义类名 | `String | Array | Object` | - | 1.5.2 | | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | `Boolean` | `false` | 1.5.3 | | max-zoom | 手势缩放时，最大缩放比例 | `Number` | `3` | 1.6.14 | diff --git a/types/image-preview.d.ts b/types/image-preview.d.ts index c2ff9b369..6440a4dcb 100644 --- a/types/image-preview.d.ts +++ b/types/image-preview.d.ts @@ -11,6 +11,7 @@ export type ImagePreviewOptions = string[] | { showIndex?: boolean; asyncClose?: boolean; showIndicators?: boolean; + closeOnPopstate?: boolean; onClose?: () => any; };