fix(Watermark): should render KeepAlive with Watermark correctly (#13422)

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<HTMLDivElement>();
-
     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,
       ],
-      () => {
+      generateWatermarkUrl,
-        /**
-         * 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,
-      },
     );
 
-    onUnmounted(() => {
+    onMounted(generateWatermarkUrl);
-      if (watermarkUrl.value) {
+
-        URL.revokeObjectURL(watermarkUrl.value);
+    onUnmounted(revokeWatermarkUrl);
-      }
-    });
 
     return () => {
       const style = extend(

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 <KeepAlive>{this.render ? <Watermark /> : null}</KeepAlive>;
+      },
+      data() {
+        return {
+          render: false,
+        };
+      },
+    });
+
+    await wrapper.setData({ render: true });
+    expect(wrapper.find('.van-watermark').style.backgroundImage).toBe(
+      'url(blob:test)',
+    );
+  });
 });