diff --git a/packages/vant/src/watermark/Watermark.tsx b/packages/vant/src/watermark/Watermark.tsx index b5e4e132a..1e7db16b1 100644 --- a/packages/vant/src/watermark/Watermark.tsx +++ b/packages/vant/src/watermark/Watermark.tsx @@ -1,6 +1,6 @@ import { defineComponent, - nextTick, + onMounted, onUnmounted, ref, watch, @@ -43,9 +43,9 @@ export default defineComponent({ setup(props, { slots }) { const svgElRef = ref(); - const watermarkUrl = ref(''); const imageBase64 = ref(''); + const renderWatermark = () => { const rotateStyle = { transformOrigin: 'center', @@ -132,6 +132,24 @@ export default defineComponent({ return URL.createObjectURL(svgBlob); }; + const revokeWatermarkUrl = () => { + if (watermarkUrl.value) { + URL.revokeObjectURL(watermarkUrl.value); + } + }; + + const generateWatermarkUrl = () => { + /** + * The path is the actual HTML rendered by renderWatermark + * => convert the SVG string to a blob image + * => put it in background-image. + */ + if (svgElRef.value) { + revokeWatermarkUrl(); + watermarkUrl.value = makeSvgToBlobUrl(svgElRef.value.innerHTML); + } + }; + watchEffect(() => { if (props.image) { makeImageToBase64(props.image); @@ -149,31 +167,12 @@ export default defineComponent({ props.gapX, props.gapY, ], - () => { - /** - * The path is the actual HTML rendered by renderWatermark - * => convert the SVG string to a blob image - * => put it in background-image. - */ - nextTick(() => { - if (svgElRef.value) { - if (watermarkUrl.value) { - URL.revokeObjectURL(watermarkUrl.value); - } - watermarkUrl.value = makeSvgToBlobUrl(svgElRef.value.innerHTML); - } - }); - }, - { - immediate: true, - }, + generateWatermarkUrl, ); - onUnmounted(() => { - if (watermarkUrl.value) { - URL.revokeObjectURL(watermarkUrl.value); - } - }); + onMounted(generateWatermarkUrl); + + onUnmounted(revokeWatermarkUrl); return () => { const style = extend( diff --git a/packages/vant/src/watermark/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/watermark/test/__snapshots__/index.spec.tsx.snap similarity index 100% rename from packages/vant/src/watermark/test/__snapshots__/index.spec.ts.snap rename to packages/vant/src/watermark/test/__snapshots__/index.spec.tsx.snap diff --git a/packages/vant/src/watermark/test/index.spec.ts b/packages/vant/src/watermark/test/index.spec.tsx similarity index 80% rename from packages/vant/src/watermark/test/index.spec.ts rename to packages/vant/src/watermark/test/index.spec.tsx index ca5ea1e96..477350f04 100644 --- a/packages/vant/src/watermark/test/index.spec.ts +++ b/packages/vant/src/watermark/test/index.spec.tsx @@ -1,6 +1,7 @@ // @ts-nocheck import { Watermark } from '..'; import { mount } from '../../../test'; +import { KeepAlive } from 'vue'; describe('watermark', () => { beforeEach(() => { @@ -17,7 +18,7 @@ describe('watermark', () => { } return createElement(tagName); }; - global.URL.createObjectURL = vi.fn(() => 'run to here'); + global.URL.createObjectURL = vi.fn(() => 'blob:test'); global.Image = class { crossOrigin = 'anonymous'; @@ -105,4 +106,22 @@ describe('watermark', () => { expect(wrapper.html()).toMatchSnapshot(); }); + + test('should render KeepAlive with Watermark correctly', async () => { + const wrapper = mount({ + render() { + return {this.render ? : null}; + }, + data() { + return { + render: false, + }; + }, + }); + + await wrapper.setData({ render: true }); + expect(wrapper.find('.van-watermark').style.backgroundImage).toBe( + 'url(blob:test)', + ); + }); });