diff --git a/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap index e9b17704e..fbdf3c621 100644 --- a/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap @@ -364,7 +364,167 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis >
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

@@ -386,7 +546,167 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis >

- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

@@ -484,7 +804,167 @@ exports[`should render list-footer slot correctly 1`] = ` >

- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

@@ -507,7 +987,167 @@ exports[`should render list-footer slot correctly 1`] = ` >

- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

diff --git a/packages/vant/src/empty/Empty.tsx b/packages/vant/src/empty/Empty.tsx index 8df0beff1..aa2531bfd 100644 --- a/packages/vant/src/empty/Empty.tsx +++ b/packages/vant/src/empty/Empty.tsx @@ -5,7 +5,7 @@ import { makeStringProp, createNamespace, } from '../utils'; -import { Network } from './Network'; +import { renderNetwork, renderMaterial } from './Images'; const [name, bem] = createNamespace('empty'); @@ -33,7 +33,10 @@ export default defineComponent({ let { image } = props; if (image === 'network') { - return Network; + return renderNetwork(); + } + if (image === 'default') { + return renderMaterial(); } if (PRESET_IMAGES.includes(image)) { diff --git a/packages/vant/src/empty/Images.tsx b/packages/vant/src/empty/Images.tsx new file mode 100644 index 000000000..eebe5a34d --- /dev/null +++ b/packages/vant/src/empty/Images.tsx @@ -0,0 +1,136 @@ +const getId = (num: number | string) => `van-empty-${num}`; +const useId = (num: number | string) => `url(#${getId(num)})`; + +const renderStop = (color: string, offset: number, opacity?: number) => ( + +); + +const renderBuildingDef = () => ( + + {renderStop('#FFF', 0, 0.5)} + {renderStop('#F2F3F5', 100)} + +); + +const renderCloudDef = () => ( + + {renderStop('#F2F3F5', 0, 0.3)} + {renderStop('#F2F3F5', 100)} + +); + +const renderBuilding = () => ( + + + + +); + +const renderCloud = () => ( + + + + +); + +export const renderNetwork = () => ( + + + {renderBuildingDef()} + + {renderStop('#FFF', 0, 0.5)} + {renderStop('#F2F3F5', 100)} + + + {renderStop('#EBEDF0', 0)} + {renderStop('#DCDEE0', 100, 0)} + + + {renderStop('#EAEDF0', 0)} + {renderStop('#DCDEE0', 100)} + + + {renderStop('#EBEDF0', 0)} + {renderStop('#FFF', 100, 0)} + + + + {renderBuilding()} + + + + + + + + + + + + + + + +); + +export const renderMaterial = () => ( + + + {renderBuildingDef()} + {renderCloudDef()} + + {renderStop('#F2F3F5', 0)} + {renderStop('#DCDEE0', 100)} + + + {renderStop('#EAEDF1', 0)} + {renderStop('#DCDEE0', 100)} + + + {renderStop('#EAEDF1', 0)} + {renderStop('#DCDEE0', 100)} + + + {renderBuilding()} + {renderCloud()} + + + + + + + + + + + + + + + +); diff --git a/packages/vant/src/empty/Network.tsx b/packages/vant/src/empty/Network.tsx deleted file mode 100644 index 8bb2e356e..000000000 --- a/packages/vant/src/empty/Network.tsx +++ /dev/null @@ -1,63 +0,0 @@ -const prefix = 'van-empty-network-'; -const renderStop = (color: string, offset: number, opacity?: number) => ( - -); - -export const Network = ( - - - - {renderStop('#FFF', 0, 0.5)} - {renderStop('#F2F3F5', 100)} - - - {renderStop('#EBEDF0', 0)} - {renderStop('#DCDEE0', 100, 0)} - - - {renderStop('#EAEDF0', 0)} - {renderStop('#DCDEE0', 100)} - - - {renderStop('#EBEDF0', 0)} - {renderStop('#FFF', 100, 0)} - - - - - - - - - - - - - - - - - - - - - - -); diff --git a/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap index 2f9303ac8..3225d70b2 100644 --- a/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap @@ -4,7 +4,167 @@ exports[`should render demo and match snapshot 1`] = `

- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Description @@ -98,7 +258,167 @@ exports[`should render demo and match snapshot 1`] = `

- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Description @@ -120,7 +440,167 @@ exports[`should render demo and match snapshot 1`] = `

- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Description diff --git a/packages/vant/src/empty/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/empty/test/__snapshots__/index.spec.ts.snap index b60cf694c..db5d6f4ed 100644 --- a/packages/vant/src/empty/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/empty/test/__snapshots__/index.spec.ts.snap @@ -3,7 +3,167 @@ exports[`should render bottom slot correctly 1`] = `

- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Custom bottom @@ -14,7 +174,167 @@ exports[`should render bottom slot correctly 1`] = ` exports[`should render description slot correctly 1`] = `
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Custom description @@ -35,7 +355,7 @@ exports[`should render svg when image is network 1`] = `

- - + + + + + + - - -