feat(ImagePreview): add overlayClass option (#10044)

* feat(ImagePreview): add overlayClass option

* chore: update
This commit is contained in:
neverland 2021-12-15 11:30:13 +08:00 committed by GitHub
parent 0507eee618
commit db5b7918af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 10 additions and 3 deletions

View File

@ -61,6 +61,7 @@ const imagePreviewProps = {
closeIcon: makeStringProp('clear'),
transition: String,
beforeClose: Function as PropType<Interceptor>,
overlayClass: unknownProp,
overlayStyle: Object as PropType<CSSProperties>,
swipeDuration: makeNumericProp(300),
startPosition: makeNumericProp(0),
@ -215,7 +216,7 @@ export default defineComponent({
return () => (
<Popup
class={[bem(), props.className]}
overlayClass={bem('overlay')}
overlayClass={[bem('overlay'), props.overlayClass]}
onClosed={onClosed}
onUpdate:show={updateShow}
{...pick(props, popupProps)}

View File

@ -142,7 +142,8 @@ export default {
| closeIcon | Close icon name | _string_ | `clear` |
| closeIconPosition | Close icon positioncan be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
| transition `v3.0.8` | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` |
| overlay-style `v3.0.8` | Custom overlay style | _object_ | - |
| overlayClass `v3.2.8` | Custom overlay class | _string \| Array \| object_ | - |
| overlayStyle `v3.0.8` | Custom overlay style | _object_ | - |
| teleport | Specifies a target element where ImagePreview will be mounted | _string \| Element_ | - |
### Props
@ -165,6 +166,7 @@ export default {
| close-icon | Close icon name | _string_ | `clear` |
| close-icon-position | Close icon positioncan be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
| transition `v3.0.8` | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` |
| overlay-class `v3.2.8` | Custom overlay class | _string \| Array \| object_ | - |
| overlay-style `v3.0.8` | Custom overlay style | _object_ | - |
| teleport | Specifies a target element where ImagePreview will be mounted | _string \| Element_ | - |

View File

@ -188,7 +188,8 @@ export default {
| closeIcon | 关闭图标名称或图片链接 | _string_ | `clear` |
| closeIconPosition | 关闭图标位置,可选值为 `top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
| transition `v3.0.8` | 动画类名,等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | `van-fade` |
| overlay-style `v3.0.8` | 自定义遮罩层样式 | _object_ | - |
| overlayClass `v3.2.8` | 自定义遮罩层类名 | _string \| Array \| object_ | - |
| overlayStyle `v3.0.8` | 自定义遮罩层样式 | _object_ | - |
| teleport | 指定挂载的节点,等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - |
### Props
@ -213,6 +214,7 @@ export default {
| close-icon | 关闭图标名称或图片链接 | _string_ | `clear` |
| close-icon-position | 关闭图标位置,可选值为 `top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
| transition `v3.0.8` | 动画类名,等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | `van-fade` |
| overlay-class `v3.2.8` | 自定义遮罩层类名 | _string \| Array \| object_ | - |
| overlay-style `v3.0.8` | 自定义遮罩层样式 | _object_ | - |
| teleport | 指定挂载的节点,等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - |

View File

@ -22,6 +22,7 @@ const defaultConfig: ImagePreviewOptions = {
transition: undefined,
beforeClose: undefined,
overlayStyle: undefined,
overlayClass: undefined,
startPosition: 0,
swipeDuration: 300,
showIndicators: false,

View File

@ -21,6 +21,7 @@ export type ImagePreviewOptions = {
transition?: string;
beforeClose?: Interceptor;
overlayStyle?: CSSProperties;
overlayClass?: unknown;
swipeDuration?: number;
startPosition?: number;
showIndicators?: boolean;