refactor(Image-Preview): Refactor placeholder from vNode type to () => vNode
shuoxian
parent
ea5e27224f
commit
0845fad612
|
|
@ -18,18 +18,18 @@ You can set different preview image. You can also customize the loading placehol
|
|||
|
||||
<template>
|
||||
<a-image
|
||||
:width="200"
|
||||
src="https://aliyuncdn.antdv.com/logo.png"
|
||||
:width="200"
|
||||
:preview="{
|
||||
src: 'http://47.100.102.7:11501/admin-api/infra/file/24/get//algorithm/execute/2025/08/20/20210628_iPhoneSE_YL_42_1755674307938_1755674703040.jpg',
|
||||
placeholder: h(CustomLoadingComp),
|
||||
src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
placeholder: () => CustomLoadingComp,
|
||||
}"
|
||||
/>
|
||||
<a-image
|
||||
:width="200"
|
||||
src="https://aliyuncdn.antdv.com/logo.png"
|
||||
:preview="{
|
||||
src: 'http://47.100.102.7:11501/admin-api/infra/file/24/get//algorithm/execute/2025/08/20/20210628_iPhoneSE_YL_42_1755674307938_1755674703040.jpg',
|
||||
src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
placeholder: true,
|
||||
}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -19,12 +19,12 @@ Previewable image.
|
|||
| --- | --- | --- | --- | --- |
|
||||
| alt | Image description | string | - | 2.0.0 |
|
||||
| fallback | Load failure fault-tolerant src | string | - | 2.0.0 |
|
||||
| height | Image height | string \| number | - | 2.0.0 |
|
||||
| placeholder | Load placeholder, use default placeholder when set `true` | boolean \| slot | - | 2.0.0 |
|
||||
| preview | preview config, disabled when `false` | boolean \| [previewType](#previewtype) | true | 2.0.0 |
|
||||
| height | Image height | string\| number | - | 2.0.0 |
|
||||
| placeholder | Load placeholder, use default placeholder when set `true` | boolean\| slot | - | 2.0.0 |
|
||||
| preview | preview config, disabled when `false` | boolean\| [previewType](#previewtype) | true | 2.0.0 |
|
||||
| src | Image path | string | - | 2.0.0 |
|
||||
| previewMask | custom mask | false \| function \| slot | - | 3.2.0 |
|
||||
| width | Image width | string \| number | - | 2.0.0 |
|
||||
| previewMask | custom mask | false\| function \| slot | - | 3.2.0 |
|
||||
| width | Image width | string\| number | - | 2.0.0 |
|
||||
|
||||
### events
|
||||
|
||||
|
|
@ -38,11 +38,12 @@ Previewable image.
|
|||
{
|
||||
visible?: boolean;
|
||||
onVisibleChange?: (visible, prevVisible) => void;
|
||||
getContainer?: string | HTMLElement | (() => HTMLElement);
|
||||
getContainer: string | HTMLElement | (() => HTMLElement);
|
||||
src?: string;
|
||||
maskClassName?: string;
|
||||
current?: number;
|
||||
placeholder?: (() => vNode) | boolean;
|
||||
}
|
||||
```
|
||||
|
||||
Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
|
||||
Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
|
||||
|
|
|
|||
|
|
@ -20,12 +20,12 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
|
|||
| --- | --- | --- | --- | --- |
|
||||
| alt | 图像描述 | string | - | 2.0.0 |
|
||||
| fallback | 加载失败容错地址 | string | - | 2.0.0 |
|
||||
| height | 图像高度 | string \| number | - | 2.0.0 |
|
||||
| placeholder | 加载占位, 为 `true` 时使用默认占位 | boolean \| slot | - | 2.0.0 |
|
||||
| preview | 预览参数，为 `false` 时禁用 | boolean \| [previewType](#previewtype) | true | 2.0.0 |
|
||||
| height | 图像高度 | string\| number | - | 2.0.0 |
|
||||
| placeholder | 加载占位, 为 `true` 时使用默认占位 | boolean\| slot | - | 2.0.0 |
|
||||
| preview | 预览参数，为 `false` 时禁用 | boolean\| [previewType](#previewtype) | true | 2.0.0 |
|
||||
| src | 图片地址 | string | - | 2.0.0 |
|
||||
| previewMask | 自定义 mask | false \| function \| slot | - | 3.2.0 |
|
||||
| width | 图像宽度 | string \| number | - | 2.0.0 |
|
||||
| previewMask | 自定义 mask | false\| function \| slot | - | 3.2.0 |
|
||||
| width | 图像宽度 | string\| number | - | 2.0.0 |
|
||||
|
||||
### 事件
|
||||
|
||||
|
|
@ -43,8 +43,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
|
|||
src?: string;
|
||||
maskClassName?: string;
|
||||
current?: number;
|
||||
placeholder?: VNode | boolean;
|
||||
placeholder?: (() => vNode) | boolean;
|
||||
}
|
||||
```
|
||||
|
||||
其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
|
||||
其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export type ImagePreviewType = Omit<
|
|||
src?: string;
|
||||
visible?: boolean;
|
||||
fallback?: string;
|
||||
placeholder?: VNode | boolean;
|
||||
placeholder?: boolean | (() => VNode);
|
||||
onVisibleChange?: (value: boolean, prevValue: boolean) => void;
|
||||
getContainer?: GetContainer | false;
|
||||
maskClassName?: string;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import {
|
|||
watch,
|
||||
cloneVNode,
|
||||
ref,
|
||||
isVNode,
|
||||
nextTick,
|
||||
} from 'vue';
|
||||
import type { VNode, Ref, PropType } from 'vue';
|
||||
|
|
@ -32,6 +31,7 @@ export interface PreviewProps extends Omit<IDialogChildProps, 'onClose' | 'mask'
|
|||
src?: string;
|
||||
alt?: string;
|
||||
rootClassName?: string;
|
||||
placeholder?: boolean | (() => VNode);
|
||||
icons?: {
|
||||
rotateLeft?: VNode;
|
||||
rotateRight?: VNode;
|
||||
|
|
@ -55,7 +55,7 @@ export const previewProps = {
|
|||
alt: String,
|
||||
fallback: String,
|
||||
placeholder: {
|
||||
type: Object as PropType<VNode | boolean>,
|
||||
type: [Boolean, Function] as PropType<boolean | (() => VNode)>,
|
||||
default: () => true,
|
||||
},
|
||||
rootClassName: String,
|
||||
|
|
@ -75,7 +75,8 @@ const Preview = defineComponent({
|
|||
props.icons,
|
||||
);
|
||||
// 判断是否是自定义placeholder
|
||||
const isCustomPlaceholder = computed(() => isVNode(props.placeholder));
|
||||
const isCustomPlaceholder = computed(() => typeof props.placeholder === 'function');
|
||||
|
||||
const isDefaultPlaceholder = computed(() => {
|
||||
return props.placeholder === true;
|
||||
});
|
||||
|
|
@ -88,6 +89,10 @@ const Preview = defineComponent({
|
|||
status.value = 'loading';
|
||||
},
|
||||
);
|
||||
const renderPlaceholder = () => {
|
||||
const { placeholder } = props;
|
||||
return typeof placeholder === 'function' ? placeholder() : placeholder;
|
||||
};
|
||||
const scale = shallowRef(1);
|
||||
const rotate = shallowRef(0);
|
||||
const flip = reactive({ x: 1, y: 1 });
|
||||
|
|
@ -427,7 +432,7 @@ const Preview = defineComponent({
|
|||
<Spin size="large" class={`${props.prefixCls}-img-placeholder`}></Spin>
|
||||
)}
|
||||
{isCustomPlaceholder.value && status.value === 'loading' && (
|
||||
<div class={`${props.prefixCls}-img-placeholder`}>{props.placeholder}</div>
|
||||
<div class={`${props.prefixCls}-img-placeholder`}>{renderPlaceholder()}</div>
|
||||
)}
|
||||
</div>
|
||||
{showLeftOrRightSwitches.value && (
|
||||
|
|
|
|||
Loading…
Reference in New Issue