feat(ImagePreview): add transition prop (#8273)

This commit is contained in:
neverland 2021-03-04 19:54:13 +08:00 committed by GitHub
parent 0093e19bf7
commit cf13e6e6a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 11 additions and 1 deletions

View File

@ -48,6 +48,10 @@ export default createComponent({
type: [Number, String],
default: 3,
},
transition: {
type: String,
default: 'van-fade',
},
showIndex: {
type: Boolean,
default: true,
@ -216,7 +220,7 @@ export default createComponent({
}
return (
<transition name="van-fade" onAfterLeave={this.onClosed}>
<transition name={this.transition} onAfterLeave={this.onClosed}>
<div vShow={this.value} class={[bem(), this.className]}>
{this.genClose()}
{this.genImages()}

View File

@ -129,6 +129,7 @@ export default {
| closeable `v2.5.0` | Whether to show close icon | _boolean_ | `false` |
| closeIcon `v2.5.0` | Close icon name | _string_ | `clear` |
| closeIconPosition `v2.5.0` | Close icon positioncan be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
| transition `v2.12.8` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | `van-fade` |
| getContainer | Return the mount node for ImagePreview | _string \| () => Element_ | - |
### Props
@ -149,6 +150,7 @@ export default {
| closeable `v2.5.0` | Whether to show close icon | _boolean_ | `false` |
| close-icon `v2.5.0` | Close icon name | _string_ | `clear` |
| close-icon-position `v2.5.0` | Close icon positioncan be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
| transition `v2.12.8` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | `van-fade` |
| get-container | Return the mount node for ImagePreview | _string \| () => Element_ | - |
### Events

View File

@ -165,6 +165,7 @@ export default {
| closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` |
| closeIcon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` |
| closeIconPosition `v2.5.0` | 关闭图标位置,可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
| transition `v2.12.8` | 动画类名,等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的 `name` 属性 | _string_ | `van-fade` |
| getContainer | 指定挂载的节点,[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
### Props
@ -187,6 +188,7 @@ export default {
| closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` |
| close-icon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` |
| close-icon-position `v2.5.0` | 关闭图标位置,可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
| transition `v2.12.8` | 动画类名,等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的 `name` 属性 | _string_ | `van-fade` |
| get-container | 指定挂载的节点,[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
### Events

View File

@ -17,6 +17,7 @@ const defaultConfig = {
closeable: false,
closeIcon: 'clear',
asyncClose: false,
transition: 'van-fade',
getContainer: 'body',
startPosition: 0,
swipeDuration: 300,

View File

@ -14,6 +14,7 @@ export type ImagePreviewOptions =
closeable?: boolean;
closeIcon?: string;
asyncClose?: boolean;
transition?: string;
swipeDuration?: number;
startPosition?: number;
showIndicators?: boolean;