blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(ImagePreview): some props can be string

Browse Source
This commit is contained in:
陈嘉涵 2020-02-01 09:43:59 +08:00
parent e81a90fe35
commit 43e9df1550
4 changed files with 24 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/image-preview/ImagePreview.js
View File

@ -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);
}
},

16
src/image-preview/README.md
View File

@ -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

16
src/image-preview/README.zh-CN.md
View File

@ -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

7
src/image-preview/demo/index.vue
View File

@ -22,12 +22,7 @@
<van-button type="primary" @click="componentCall">
{{ $t('componentCall') }}
</van-button>
<van-image-preview
v-model="show"
:images="images"
:swipe-duration="300"
@change="onChange"
>
<van-image-preview v-model="show" :images="images" @change="onChange">
<template #index>{{ $t('index', index) }}</template>
</van-image-preview>
</demo-block>