blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-23 18:00:27 +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, default: true,
}, },
swipeDuration: { swipeDuration: {
type: Number, type: [Number, String],
default: 500, default: 500,
}, },
overlay: { overlay: {
@ -56,15 +56,15 @@ export default createComponent({
default: true, default: true,
}, },
startPosition: { startPosition: {
type: Number, type: [Number, String],
default: 0, default: 0,
}, },
minZoom: { minZoom: {
type: Number, type: [Number, String],
default: 1 / 3, default: 1 / 3,
}, },
maxZoom: { maxZoom: {
type: Number, type: [Number, String],
default: 3, default: 3,
}, },
overlayClass: { overlayClass: {
@ -104,9 +104,9 @@ export default createComponent({
watch: { watch: {
value(val) { value(val) {
if (val) { if (val) {
this.setActive(this.startPosition); this.setActive(+this.startPosition);
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.swipe.swipeTo(this.startPosition, { immediate: true }); this.$refs.swipe.swipeTo(+this.startPosition, { immediate: true });
}); });
} else { } else {
this.$emit('close', { this.$emit('close', {
@ -214,7 +214,7 @@ export default createComponent({
if (this.zooming && touches.length === 2) { if (this.zooming && touches.length === 2) {
const distance = getDistance(touches); const distance = getDistance(touches);
const scale = (this.startScale * distance) / this.startDistance; 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 | | Attribute | Description | Type | Default |
|------|------|------|------| |------|------|------|------|
| images | Images URL list | *string[]* | `[]` | | images | Images URL list | *string[]* | `[]` |
| startPosition | Start position | *number* | `0` | | startPosition | Start position | *number \| string* | `0` |
| showIndex | Whether to show index | *boolean* | `true` | | showIndex | Whether to show index | *boolean* | `true` |
| showIndicators | Whether to show indicators | *boolean* | `false` | | showIndicators | Whether to show indicators | *boolean* | `false` |
| loop | Whether to enable loop | *boolean* | `true` | | 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* | - | | onClose | Triggered when close | *Function* | - |
| onChange `v2.0.3` | Triggered when current image change | *Function* | - | | onChange `v2.0.3` | Triggered when current image change | *Function* | - |
| closeOnPopstate | Whether to close when popstate | *boolean* | `false` | | closeOnPopstate | Whether to close when popstate | *boolean* | `false` |
| asyncClose | Whether to enable async close | *boolean* | `false` | | asyncClose | Whether to enable async close | *boolean* | `false` |
| className | Custom className | *any* | - | | className | Custom className | *any* | - |
| lazyLoad | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | *boolean* | `false` | | lazyLoad | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | *boolean* | `false` |
| maxZoom | Max zoom | *number* | `3` | | maxZoom | Max zoom | *number \| string* | `3` |
| minZoom | Min zoom | *number* | `1/3` | | minZoom | Min zoom | *number \| string* | `1/3` |
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| |------|------|------|------|
| images | Images URL list | *string[]* | `[]` | | 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-index | Whether to show index | *boolean* | `true` |
| show-indicators | Whether to show indicators | *boolean* | `false` | | show-indicators | Whether to show indicators | *boolean* | `false` |
| loop | Whether to enable loop | *boolean* | `true` | | loop | Whether to enable loop | *boolean* | `true` |
| swipe-duration | Animation duration (ms) | *number* | `500` |
| async-close | Whether to enable async close | *boolean* | `false` | | 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* | `false` |
| class-name | Custom className | *any* | - | | class-name | Custom className | *any* | - |
| lazy-load | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | *boolean* | `false` | | lazy-load | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | *boolean* | `false` |
| max-zoom | Max zoom | *number* | `3` | | max-zoom | Max zoom | *number \| string* | `3` |
| min-zoom | Min zoom | *number* | `1/3` | | min-zoom | Min zoom | *number \| string* | `1/3` |
### Events ### Events

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

@ -99,19 +99,19 @@ export default {
| 参数名 | 说明 | 类型 | 默认值 | | 参数名 | 说明 | 类型 | 默认值 |
|------|------|------|------| |------|------|------|------|
| images | 需要预览的图片 URL 数组 | *string[]* | `[]` | | images | 需要预览的图片 URL 数组 | *string[]* | `[]` |
| startPosition | 图片预览起始位置索引 | *number* | `0` | | startPosition | 图片预览起始位置索引 | *number \| string* | `0` |
| swipeDuration | 动画时长，单位为`ms` | *number \| string* | `500` |
| showIndex | 是否显示页码 | *boolean* | `true` | | showIndex | 是否显示页码 | *boolean* | `true` |
| showIndicators | 是否显示轮播指示器 | *boolean* | `false` | | showIndicators | 是否显示轮播指示器 | *boolean* | `false` |
| loop | 是否开启循环播放 | *boolean* | `true` | | loop | 是否开启循环播放 | *boolean* | `true` |
| swipeDuration | 动画时长，单位为`ms` | *number* | `500` |
| onClose | 关闭时的回调函数 | *Function* | - | | onClose | 关闭时的回调函数 | *Function* | - |
| onChange `v2.0.3` | 切换图片时的回调函数，回调参数为当前索引 | *Function* | - | | onChange `v2.0.3` | 切换图片时的回调函数，回调参数为当前索引 | *Function* | - |
| asyncClose | 是否开启异步关闭 | *boolean* | `false` | | asyncClose | 是否开启异步关闭 | *boolean* | `false` |
| closeOnPopstate | 是否在页面回退时自动关闭 | *boolean* | `false` | | closeOnPopstate | 是否在页面回退时自动关闭 | *boolean* | `false` |
| className | 自定义类名 | *any* | - | | className | 自定义类名 | *any* | - |
| lazyLoad | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` | | lazyLoad | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` |
| maxZoom | 手势缩放时，最大缩放比例 | *number* | `3` | | maxZoom | 手势缩放时，最大缩放比例 | *number \| string* | `3` |
| minZoom | 手势缩放时，最小缩放比例 | *number* | `1/3` | | minZoom | 手势缩放时，最小缩放比例 | *number \| string* | `1/3` |
### Props ### Props
@ -120,17 +120,17 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| |------|------|------|------|
| images | 需要预览的图片 URL 数组 | *string[]* | `[]` | | images | 需要预览的图片 URL 数组 | *string[]* | `[]` |
| start-position | 图片预览起始位置索引 | *number* | `0` | | start-position | 图片预览起始位置索引 | *number \| string* | `0` |
| swipe-duration | 动画时长，单位为 ms | *number \| string* | `500` |
| show-index | 是否显示页码 | *boolean* | `true` | | show-index | 是否显示页码 | *boolean* | `true` |
| show-indicators | 是否显示轮播指示器 | *boolean* | `false` | | show-indicators | 是否显示轮播指示器 | *boolean* | `false` |
| loop | 是否开启循环播放 | *boolean* | `true` | | loop | 是否开启循环播放 | *boolean* | `true` |
| swipe-duration | 动画时长，单位为 ms | *number* | `500` |
| async-close | 是否开启异步关闭 | *boolean* | `false` | | async-close | 是否开启异步关闭 | *boolean* | `false` |
| close-on-popstate | 是否在页面回退时自动关闭 | *boolean* | `false` | | close-on-popstate | 是否在页面回退时自动关闭 | *boolean* | `false` |
| class-name | 自定义类名 | *any* | - | | class-name | 自定义类名 | *any* | - |
| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` | | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` |
| max-zoom | 手势缩放时，最大缩放比例 | *number* | `3` | | max-zoom | 手势缩放时，最大缩放比例 | *number \| string* | `3` |
| min-zoom | 手势缩放时，最小缩放比例 | *number* | `1/3` | | min-zoom | 手势缩放时，最小缩放比例 | *number \| string* | `1/3` |
### Events ### Events

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

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