chore(Watermark): rename default slot to content (#11755)

packages/vant/src/watermark/README.md

@@ -76,13 +76,15 @@ Use the `full-page` prop to control the display range of the watermark.
 
 ### HTML Watermark
 
-Use the `default` slot to pass HTML directly. Inline styles are supported, and self-closing tags are not supported.
+Use the `content` slot to pass HTML as watermark. Only supports inline styles, and self-closing tags are not supported.
 
 ```html
 <van-watermark :width="150">
-  <div style="background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%)">
+  <template #content>
-    <p style="mix-blend-mode: difference; color: #fff">Vant watermark</p>
+    <div style="background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%)">
-  </div>
+      <p style="mix-blend-mode: difference; color: #fff">Vant watermark</p>
+    </div>
+  </template>
 </van-watermark>
 ```
 
@@ -98,8 +100,8 @@ Use the `default` slot to pass HTML directly. Inline styles are supported, and s
 | content | Text watermark content | _string_ | - |
 | image | Image watermark content. If `content` and `image` are passed at the same time, use the `image` watermark first | _string_ | - |
 | full-page | Whether to display the watermark in full screen | _boolean_ | `true` |
-| gapX | Horizontal spacing between watermarks | _number_ | `0` |
+| gap-x | Horizontal spacing between watermarks | _number_ | `0` |
-| gapY | Vertical spacing between watermarks | _number_ | `0` |
+| gap-y | Vertical spacing between watermarks | _number_ | `0` |
 | text-color | Color of text watermark | _string_ | `#dcdee0` |
 | opacity | Opacity of watermark | _number \| string_ | - |
 
@@ -107,7 +109,7 @@ Use the `default` slot to pass HTML directly. Inline styles are supported, and s
 
 | Attribute | Description |
 | --- | --- |
-| default | Content of HTML watermark. Inline styles are supported, and self-closing tags are not supported. This slot is invalid if `content` or `image` props is passed |
+| content | Content of HTML watermark. Only supports inline styles, and self-closing tags are not supported. The priority is higher than `content` or `image` props |
 
 ### Types
 

packages/vant/src/watermark/README.zh-CN.md

@@ -76,13 +76,15 @@ app.use(Watermark);
 
 ### HTML 水印
 
-通过默认插槽可以直接传入 HTML，HTML 样式仅支持行内样式同时不支持传入自闭合标签。
+通过 `content` 插槽可以直接传入 HTML 作为水印。HTML 中的样式仅支持行内样式，同时不支持传入自闭合标签。
 
 ```html
 <van-watermark :width="150">
-  <div style="background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%)">
+  <template #content>
-    <p style="mix-blend-mode: difference; color: #fff">Vant watermark</p>
+    <div style="background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%)">
-  </div>
+      <p style="mix-blend-mode: difference; color: #fff">Vant watermark</p>
+    </div>
+  </template>
 </van-watermark>
 ```
 
@@ -98,8 +100,8 @@ app.use(Watermark);
 | content | 文字水印的内容 | _string_ | - |
 | image | 图片水印的内容，如果与 `content` 同时传入，优先使用图片水印 | _string_ | - |
 | full-page | 水印是否全屏显示 | _boolean_ | `false` |
-| gapX | 水印之间的水平间隔 | _number_ | `0` |
+| gap-x | 水印之间的水平间隔 | _number_ | `0` |
-| gapY | 水印之间的垂直间隔 | _number_ | `0` |
+| gap-y | 水印之间的垂直间隔 | _number_ | `0` |
 | text-color | 文字水印的颜色 | _string_ | `#dcdee0` |
 | opacity | 水印的透明度 | _number \| string_ | - |
 
@@ -107,7 +109,7 @@ app.use(Watermark);
 
 | 名称 | 说明 |
 | --- | --- |
-| default | HTML 水印的内容，仅支持行内样式同时不支持传入自闭合标签，存在 `content` 或 `image` 属性时，此插槽无效 |
+| content | HTML 水印的内容，仅支持行内样式，同时不支持传入自闭合标签，优先级高于 `content` 或 `image` 属性 |
 
 ### 类型定义
 

packages/vant/src/watermark/Watermark.tsx

@@ -47,8 +47,13 @@ export default defineComponent({
     const watermarkUrl = ref('');
     const imageBase64 = ref('');
     const renderWatermark = () => {
+      const rotateStyle = {
+        transformOrigin: 'center',
+        transform: `rotate(${props.rotate}deg)`,
+      };
+
       const svgInner = () => {
-        if (props.image) {
+        if (props.image && !slots.content) {
           return (
             <image
               href={imageBase64.value}
@@ -56,11 +61,8 @@ export default defineComponent({
               y="0"
               width={props.width}
               height={props.height}
-              style={{
+              style={rotateStyle}
-                transformOrigin: 'center',
+            />
-                transform: `rotate(${props.rotate}deg)`,
-              }}
-            ></image>
           );
         }
 
@@ -69,20 +71,12 @@ export default defineComponent({
             <div
               // @ts-ignore
               xmlns="http://www.w3.org/1999/xhtml"
-              style={{
+              style={rotateStyle}
-                transform: `rotate(${props.rotate}deg)`,
-              }}
             >
-              {props.content ? (
+              {slots.content ? (
-                <span
+                slots.content()
-                  style={{
-                    color: props.textColor,
-                  }}
-                >
-                  {props.content}
-                </span>
               ) : (
-                slots?.default?.()
+                <span style={{ color: props.textColor }}>{props.content}</span>
               )}
             </div>
           </foreignObject>
@@ -181,7 +175,7 @@ export default defineComponent({
 
       return (
         <div class={bem({ full: props.fullPage })} style={style}>
-          <div style={{ display: 'none' }} ref={svgElRef}>
+          <div class={bem('wrapper')} ref={svgElRef}>
             {renderWatermark()}
           </div>
         </div>

packages/vant/src/watermark/demo/index.vue

@@ -88,11 +88,17 @@ const fullPage = ref(false);
   <demo-block :title="t('htmlWatermark')">
     <div class="demo-watermark-wrapper">
       <van-watermark :width="150" :full-page="false">
-        <div
+        <template #content>
-          style="background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%)"
+          <div
-        >
+            style="
-          <p style="mix-blend-mode: difference; color: #fff">Vant watermark</p>
+              background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);
-        </div>
+            "
+          >
+            <p style="mix-blend-mode: difference; color: #fff">
+              Vant watermark
+            </p>
+          </div>
+        </template>
       </van-watermark>
     </div>
   </demo-block>

packages/vant/src/watermark/index.less

@@ -12,6 +12,10 @@
   background-repeat: repeat;
   pointer-events: none;
 
+  &__wrapper {
+    display: none;
+  }
+
   &--full {
     position: fixed;
   }

packages/vant/src/watermark/test/__snapshots__/index.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`watermark should render content 1`] = `
 <div class="van-watermark van-watermark--full"
      style="background-image: url();"
 >
-  <div style="display: none;">
+  <div class="van-watermark__wrapper">
     <svg viewbox="0 0 100 100"
          width="100"
          height="100"
@@ -17,7 +17,7 @@ exports[`watermark should render content 1`] = `
                      height="100"
       >
         <div xmlns="http://www.w3.org/1999/xhtml"
-             style="transform: rotate(-22deg);"
+             style="transform-origin: center; transform: rotate(-22deg);"
         >
           <span style="color: red;">
             Vant
@@ -33,7 +33,7 @@ exports[`watermark should render html 1`] = `
 <div class="van-watermark van-watermark--full"
      style="background-image: url();"
 >
-  <div style="display: none;">
+  <div class="van-watermark__wrapper">
     <svg viewbox="0 0 100 100"
          width="100"
          height="100"
@@ -46,7 +46,7 @@ exports[`watermark should render html 1`] = `
                      height="100"
       >
         <div xmlns="http://www.w3.org/1999/xhtml"
-             style="transform: rotate(-22deg);"
+             style="transform-origin: center; transform: rotate(-22deg);"
         >
           vant watermark test
         </div>
@@ -60,7 +60,7 @@ exports[`watermark should render image 1`] = `
 <div class="van-watermark van-watermark--full"
      style="background-image: url();"
 >
-  <div style="display: none;">
+  <div class="van-watermark__wrapper">
     <svg viewbox="0 0 100 100"
          width="100"
          height="100"
@@ -84,7 +84,7 @@ exports[`watermark test false value fullPage 1`] = `
 <div class="van-watermark"
      style="background-image: url();"
 >
-  <div style="display: none;">
+  <div class="van-watermark__wrapper">
     <svg viewbox="0 0 100 100"
          width="100"
          height="100"
@@ -97,7 +97,7 @@ exports[`watermark test false value fullPage 1`] = `
                      height="100"
       >
         <div xmlns="http://www.w3.org/1999/xhtml"
-             style="transform: rotate(-22deg);"
+             style="transform-origin: center; transform: rotate(-22deg);"
         >
           vant watermark test
         </div>
@@ -111,7 +111,7 @@ exports[`watermark test width, height, rotate, zIndex 1`] = `
 <div class="van-watermark van-watermark--full"
      style="background-image: url(); z-index: 200;"
 >
-  <div style="display: none;">
+  <div class="van-watermark__wrapper">
     <svg viewbox="0 0 20 20"
          width="20"
          height="20"
@@ -124,7 +124,7 @@ exports[`watermark test width, height, rotate, zIndex 1`] = `
                      height="20"
       >
         <div xmlns="http://www.w3.org/1999/xhtml"
-             style="transform: rotate(20deg);"
+             style="transform-origin: center; transform: rotate(20deg);"
         >
           vant watermark test
         </div>

packages/vant/src/watermark/test/index.spec.ts

@@ -70,7 +70,7 @@ describe('watermark', () => {
   test('should render html', () => {
     const wrapper = mount(Watermark, {
       slots: {
-        default: () => 'vant watermark test',
+        content: () => 'vant watermark test',
       },
     });
 
@@ -86,7 +86,7 @@ describe('watermark', () => {
         zIndex: 200,
       },
       slots: {
-        default: () => 'vant watermark test',
+        content: () => 'vant watermark test',
       },
     });
 
@@ -99,7 +99,7 @@ describe('watermark', () => {
         fullPage: false,
       },
       slots: {
-        default: () => 'vant watermark test',
+        content: () => 'vant watermark test',
       },
     });