blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

feat(Image): localize error image (#10515)

Browse Source
This commit is contained in:
neverland 2022-04-17 12:30:06 +08:00 committed by GitHub
parent 87782448b6
commit 932c57f9a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 144 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/vant/src/empty/Empty.tsx
View File

@ -5,7 +5,7 @@ import {
makeStringProp,
createNamespace,
} from '../utils';
import { renderNetwork, renderMaterial } from './Images';
import { renderNetwork, renderMaterial, renderError } from './Images';
const [name, bem] = createNamespace('empty');
@ -38,6 +38,9 @@ export default defineComponent({
if (image === 'default') {
return renderMaterial();
}
if (image === 'error') {
return renderError();
}
if (PRESET_IMAGES.includes(image)) {
image = `https://img.yzcdn.cn/vant/empty-image-${image}.png`;

40
packages/vant/src/empty/Images.tsx
View File

@ -19,6 +19,21 @@ const renderCloudDef = () => (
</linearGradient>
);
const renderShadowRef = () => (
<radialGradient
cx="50%"
cy="54%"
fx="50%"
fy="54%"
r="297%"
gradientTransform="matrix(-.16 0 0 -.33 .58 .72)"
id={getId('c')}
>
<stop stop-color="#EBEDF0" offset="0%" />
<stop stop-color="#F2F3F5" stop-opacity=".3" offset="100%" />
</radialGradient>
);
const renderBuilding = () => (
<g opacity=".8">
<path d="M36 131V53H16v20H2v58h34z" fill={useId('a')} />
@ -39,6 +54,10 @@ const renderCloud = () => (
</g>
);
const renderShadow = () => (
<ellipse fill={useId('c')} opacity=".8" cx="80" cy="140" rx="46" ry="8" />
);
export const renderNetwork = () => (
<svg viewBox="0 0 160 160">
<defs>
@ -134,3 +153,24 @@ export const renderMaterial = () => (
</g>
</svg>
);
export const renderError = () => (
<svg viewBox="0 0 160 160">
<defs>
{renderBuildingDef()}
{renderCloudDef()}
{renderShadowRef()}
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id={getId(8)}>
{renderStop('#F2F3F5', 0)}
{renderStop('#DCDEE0', 100)}
</linearGradient>
</defs>
{renderBuilding()}
{renderCloud()}
{renderShadow()}
<path
d="m59 60 21 21 21-21h3l9 9v3L92 93l21 21v3l-9 9h-3l-21-21-21 21h-3l-9-9v-3l21-21-21-21v-3l9-9h3Z"
fill={useId(8)}
/>
</svg>
);

101
packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap
View File

@ -227,7 +227,106 @@ exports[`should render demo and match snapshot 1`] = `
>
<div class="van-empty">
<div class="van-empty__image">
<img src="https://img.yzcdn.cn/vant/empty-image-error.png">
<svg viewbox="0 0 160 160">
<defs>
<linearGradient id="van-empty-a"
x1="64%"
y1="100%"
x2="64%"
>
<stop stop-color="#FFF"
offset="0%"
stop-opacity="0.5"
>
</stop>
<stop stop-color="#F2F3F5"
offset="100%"
>
</stop>
</linearGradient>
<linearGradient id="van-empty-b"
x1="64%"
y1="97%"
x2="64%"
y2="0%"
>
<stop stop-color="#F2F3F5"
offset="0%"
stop-opacity="0.3"
>
</stop>
<stop stop-color="#F2F3F5"
offset="100%"
>
</stop>
</linearGradient>
<radialGradient cx="50%"
cy="54%"
fx="50%"
fy="54%"
r="297%"
gradienttransform="matrix(-.16 0 0 -.33 .58 .72)"
id="van-empty-c"
>
<stop stop-color="#EBEDF0"
offset="0%"
>
</stop>
<stop stop-color="#F2F3F5"
stop-opacity=".3"
offset="100%"
>
</stop>
</radialGradient>
<linearGradient x1="50%"
y1="0%"
x2="50%"
y2="100%"
id="van-empty-8"
>
<stop stop-color="#F2F3F5"
offset="0%"
>
</stop>
<stop stop-color="#DCDEE0"
offset="100%"
>
</stop>
</linearGradient>
</defs>
<g opacity=".8">
<path d="M36 131V53H16v20H2v58h34z"
fill="url(#van-empty-a)"
>
</path>
<path d="M123 15h22v14h9v77h-31V15z"
fill="url(#van-empty-a)"
>
</path>
</g>
<g opacity=".8">
<path d="M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z"
fill="url(#van-empty-b)"
>
</path>
<path d="M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z"
fill="url(#van-empty-b)"
>
</path>
</g>
<ellipse fill="url(#van-empty-c)"
opacity=".8"
cx="80"
cy="140"
rx="46"
ry="8"
>
</ellipse>
<path d="m59 60 21 21 21-21h3l9 9v3L92 93l21 21v3l-9 9h-3l-21-21-21 21h-3l-9-9v-3l21-21-21-21v-3l9-9h3Z"
fill="url(#van-empty-8)"
>
</path>
</svg>
</div>
<p class="van-empty__description">
Description