From 43e9df15506c8b4898b307e6d4071cfbb2219657 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Sat, 1 Feb 2020 09:43:59 +0800 Subject: [PATCH] feat(ImagePreview): some props can be string --- src/image-preview/ImagePreview.js | 14 +++++++------- src/image-preview/README.md | 16 ++++++++-------- src/image-preview/README.zh-CN.md | 16 ++++++++-------- src/image-preview/demo/index.vue | 7 +------ 4 files changed, 24 insertions(+), 29 deletions(-) diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js index 5db4d416d..37c5d5c7a 100644 --- a/src/image-preview/ImagePreview.js +++ b/src/image-preview/ImagePreview.js @@ -44,7 +44,7 @@ export default createComponent({ default: true, }, swipeDuration: { - type: Number, + type: [Number, String], default: 500, }, overlay: { @@ -56,15 +56,15 @@ export default createComponent({ default: true, }, startPosition: { - type: Number, + type: [Number, String], default: 0, }, minZoom: { - type: Number, + type: [Number, String], default: 1 / 3, }, maxZoom: { - type: Number, + type: [Number, String], default: 3, }, overlayClass: { @@ -104,9 +104,9 @@ export default createComponent({ watch: { value(val) { if (val) { - this.setActive(this.startPosition); + this.setActive(+this.startPosition); this.$nextTick(() => { - this.$refs.swipe.swipeTo(this.startPosition, { immediate: true }); + this.$refs.swipe.swipeTo(+this.startPosition, { immediate: true }); }); } else { this.$emit('close', { @@ -214,7 +214,7 @@ export default createComponent({ if (this.zooming && touches.length === 2) { const distance = getDistance(touches); const scale = (this.startScale * distance) / this.startDistance; - this.scale = range(scale, this.minZoom, this.maxZoom); + this.scale = range(scale, +this.minZoom, +this.maxZoom); } }, diff --git a/src/image-preview/README.md b/src/image-preview/README.md index c26822b04..47ab9ea65 100644 --- a/src/image-preview/README.md +++ b/src/image-preview/README.md @@ -87,36 +87,36 @@ export default { | Attribute | Description | Type | Default | |------|------|------|------| | images | Images URL list | *string[]* | `[]` | -| startPosition | Start position | *number* | `0` | +| startPosition | Start position | *number \| string* | `0` | | showIndex | Whether to show index | *boolean* | `true` | | showIndicators | Whether to show indicators | *boolean* | `false` | | loop | Whether to enable loop | *boolean* | `true` | -| swipeDuration | Animation duration (ms) | *number* | `500` | +| swipeDuration | Animation duration (ms) | *number \| string* | `500` | | onClose | Triggered when close | *Function* | - | | onChange `v2.0.3` | Triggered when current image change | *Function* | - | | closeOnPopstate | Whether to close when popstate | *boolean* | `false` | | asyncClose | Whether to enable async close | *boolean* | `false` | | className | Custom className | *any* | - | | lazyLoad | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | *boolean* | `false` | -| maxZoom | Max zoom | *number* | `3` | -| minZoom | Min zoom | *number* | `1/3` | +| maxZoom | Max zoom | *number \| string* | `3` | +| minZoom | Min zoom | *number \| string* | `1/3` | ### Props | Attribute | Description | Type | Default | |------|------|------|------| | images | Images URL list | *string[]* | `[]` | -| start-position | Start position | *number* | `0` | +| start-position | Start position | *number \| string* | `0` | +| swipe-duration | Animation duration (ms) | *number \| string* | `500` | | show-index | Whether to show index | *boolean* | `true` | | show-indicators | Whether to show indicators | *boolean* | `false` | | loop | Whether to enable loop | *boolean* | `true` | -| swipe-duration | Animation duration (ms) | *number* | `500` | | async-close | Whether to enable async close | *boolean* | `false` | | close-on-popstate | Whether to close when popstate | *boolean* | `false` | | class-name | Custom className | *any* | - | | lazy-load | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | *boolean* | `false` | -| max-zoom | Max zoom | *number* | `3` | -| min-zoom | Min zoom | *number* | `1/3` | +| max-zoom | Max zoom | *number \| string* | `3` | +| min-zoom | Min zoom | *number \| string* | `1/3` | ### Events diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md index 1adf7474b..20d1b910c 100644 --- a/src/image-preview/README.zh-CN.md +++ b/src/image-preview/README.zh-CN.md @@ -99,19 +99,19 @@ export default { | 参数名 | 说明 | 类型 | 默认值 | |------|------|------|------| | images | 需要预览的图片 URL 数组 | *string[]* | `[]` | -| startPosition | 图片预览起始位置索引 | *number* | `0` | +| startPosition | 图片预览起始位置索引 | *number \| string* | `0` | +| swipeDuration | 动画时长，单位为`ms` | *number \| string* | `500` | | showIndex | 是否显示页码 | *boolean* | `true` | | showIndicators | 是否显示轮播指示器 | *boolean* | `false` | | loop | 是否开启循环播放 | *boolean* | `true` | -| swipeDuration | 动画时长，单位为`ms` | *number* | `500` | | onClose | 关闭时的回调函数 | *Function* | - | | onChange `v2.0.3` | 切换图片时的回调函数，回调参数为当前索引 | *Function* | - | | asyncClose | 是否开启异步关闭 | *boolean* | `false` | | closeOnPopstate | 是否在页面回退时自动关闭 | *boolean* | `false` | | className | 自定义类名 | *any* | - | | lazyLoad | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` | -| maxZoom | 手势缩放时，最大缩放比例 | *number* | `3` | -| minZoom | 手势缩放时，最小缩放比例 | *number* | `1/3` | +| maxZoom | 手势缩放时，最大缩放比例 | *number \| string* | `3` | +| minZoom | 手势缩放时，最小缩放比例 | *number \| string* | `1/3` | ### Props @@ -120,17 +120,17 @@ export default { | 参数 | 说明 | 类型 | 默认值 | |------|------|------|------| | images | 需要预览的图片 URL 数组 | *string[]* | `[]` | -| start-position | 图片预览起始位置索引 | *number* | `0` | +| start-position | 图片预览起始位置索引 | *number \| string* | `0` | +| swipe-duration | 动画时长，单位为 ms | *number \| string* | `500` | | show-index | 是否显示页码 | *boolean* | `true` | | show-indicators | 是否显示轮播指示器 | *boolean* | `false` | | loop | 是否开启循环播放 | *boolean* | `true` | -| swipe-duration | 动画时长，单位为 ms | *number* | `500` | | async-close | 是否开启异步关闭 | *boolean* | `false` | | close-on-popstate | 是否在页面回退时自动关闭 | *boolean* | `false` | | class-name | 自定义类名 | *any* | - | | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` | -| max-zoom | 手势缩放时，最大缩放比例 | *number* | `3` | -| min-zoom | 手势缩放时，最小缩放比例 | *number* | `1/3` | +| max-zoom | 手势缩放时，最大缩放比例 | *number \| string* | `3` | +| min-zoom | 手势缩放时，最小缩放比例 | *number \| string* | `1/3` | ### Events diff --git a/src/image-preview/demo/index.vue b/src/image-preview/demo/index.vue index f679ac2e8..7ceadf5ce 100644 --- a/src/image-preview/demo/index.vue +++ b/src/image-preview/demo/index.vue @@ -22,12 +22,7 @@ {{ $t('componentCall') }} - +