feat(Watermark): add --van-watermark-z-index css var (#11734)

packages/vant/src/watermark/README.md

@@ -95,13 +95,13 @@ Use the `default slot` to pass HTML directly. Inline styles are supported, and s
 | --- | --- | --- | --- |
 | width | Watermark width | _number_ | `100` |
 | height | Watermark height | _number_ | `100` |
-| zIndex | Watermark's z-index | _number_ | `100` |
+| z-index | Watermark's z-index | _number \| string_ | `100` |
 | 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_ | - |
-| fullPage | Whether to display the watermark in full screen | _boolean_ | `true` |
+| full-page | Whether to display the watermark in full screen | _boolean_ | `true` |
 | gapX | Horizontal spacing between watermarks | _number_ | `0` |
 | gapY | Vertical spacing between watermarks | _number_ | `0` |
-| fontColor | Color of text watermark | _string_ | `#dcdee0` |
+| font-color | Color of text watermark | _string_ | `#dcdee0` |
 | opacity | opacity of watermark | _number_ | `1` |
 
 ### Slots
@@ -117,3 +117,13 @@ The component exports the following type definitions:
 ```ts
 import type { WaterProps } from 'vant';
 ```
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name                    | Default Value | Description             |
+| ----------------------- | ------------- | ----------------------- |
+| --van-watermark-z-index | _100_         | z-index of root element |

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

@@ -95,13 +95,13 @@ app.use(Watermark);
 | --- | --- | --- | --- |
 | width | 水印宽度 | _number_ | `100` |
 | height | 水印高度 | _number_ | `100` |
-| zIndex | 水印的 z-index | _number_ | `100` |
+| z-index | 水印的 z-index | _number \| string_ | `100` |
 | content | 文字水印的内容 | _string_ | - |
 | image | 图片水印的内容，如果与 content 同时传入，优先使用图片水印 | _string_ | - |
-| fullPage | 水印是否全屏显示 | _boolean_ | `false` |
+| full-page | 水印是否全屏显示 | _boolean_ | `false` |
-| gapX | 水印水平间隔 | _number_ | `0` |
+| gapX | 水印之间的水平间隔 | _number_ | `0` |
-| gapY | 水印垂直间隔 | _number_ | `0` |
+| gapY | 水印之间的垂直间隔 | _number_ | `0` |
-| fontColor | 文字水印的颜色 | _string_ | `#dcdee0` |
+| font-color | 文字水印的颜色 | _string_ | `#dcdee0` |
 | opacity | 水印的透明度 | _number_ | `1` |
 
 ### Slots
@@ -117,3 +117,13 @@ app.use(Watermark);
 ```ts
 import type { WaterProps } from 'vant';
 ```
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                    | 默认值 | 描述                  |
+| ----------------------- | ------ | --------------------- |
+| --van-watermark-z-index | _100_  | 根节点的 z-index 层级 |

packages/vant/src/watermark/Watermark.tsx

@@ -8,11 +8,14 @@ import {
   type ExtractPropTypes,
 } from 'vue';
 import {
+  extend,
+  truthProp,
+  numericProp,
   createNamespace,
+  getZIndexStyle,
   makeNumberProp,
   makeNumericProp,
   makeStringProp,
-  truthProp,
 } from '../utils';
 
 const [name, bem] = createNamespace('watermark');
@@ -21,7 +24,7 @@ export const watermarkProps = {
   width: makeNumberProp(100),
   height: makeNumberProp(100),
   rotate: makeNumericProp(-22),
-  zIndex: makeNumberProp(100),
+  zIndex: numericProp,
   content: String,
   image: String,
   fullPage: truthProp,
@@ -166,19 +169,19 @@ export default defineComponent({
       }
     });
 
-    return () => (
+    return () => {
-      <div
+      const style = extend(
-        class={bem()}
+        { backgroundImage: `url(${watermarkUrl.value})` },
-        style={{
+        getZIndexStyle(props.zIndex)
-          position: props.fullPage ? 'fixed' : 'absolute',
+      );
-          backgroundImage: `url(${watermarkUrl.value})`,
+
-          zIndex: props.zIndex,
+      return (
-        }}
+        <div class={bem({ full: props.fullPage })} style={style}>
-      >
           <div style={{ display: 'none' }} ref={svgElRef}>
             {renderWatermark()}
           </div>
         </div>
       );
+    };
   },
 });

packages/vant/src/watermark/index.less

@@ -1,8 +1,18 @@
+:root {
+  --van-watermark-z-index: 100;
+}
+
 .van-watermark {
-  background-repeat: repeat;
+  position: absolute;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
+  z-index: var(--van-watermark-z-index);
+  background-repeat: repeat;
   pointer-events: none;
+
+  &--full {
+    position: fixed;
+  }
 }

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`watermark should render content 1`] = `
-<div class="van-watermark"
+<div class="van-watermark van-watermark--full"
-     style="position: fixed; background-image: url(); z-index: 100;"
+     style="background-image: url();"
 >
   <div style="display: none;">
     <svg viewbox="0 0 100 100"
@@ -30,8 +30,8 @@ exports[`watermark should render content 1`] = `
 `;
 
 exports[`watermark should render html 1`] = `
-<div class="van-watermark"
+<div class="van-watermark van-watermark--full"
-     style="position: fixed; background-image: url(); z-index: 100;"
+     style="background-image: url();"
 >
   <div style="display: none;">
     <svg viewbox="0 0 100 100"
@@ -57,8 +57,8 @@ exports[`watermark should render html 1`] = `
 `;
 
 exports[`watermark should render image 1`] = `
-<div class="van-watermark"
+<div class="van-watermark van-watermark--full"
-     style="position: fixed; background-image: url(); z-index: 100;"
+     style="background-image: url();"
 >
   <div style="display: none;">
     <svg viewbox="0 0 100 100"
@@ -82,7 +82,7 @@ exports[`watermark should render image 1`] = `
 
 exports[`watermark test false value fullPage 1`] = `
 <div class="van-watermark"
-     style="position: absolute; background-image: url(); z-index: 100;"
+     style="background-image: url();"
 >
   <div style="display: none;">
     <svg viewbox="0 0 100 100"
@@ -108,8 +108,8 @@ exports[`watermark test false value fullPage 1`] = `
 `;
 
 exports[`watermark test width, height, rotate, zIndex 1`] = `
-<div class="van-watermark"
+<div class="van-watermark van-watermark--full"
-     style="position: fixed; background-image: url(); z-index: 200;"
+     style="background-image: url(); z-index: 200;"
 >
   <div style="display: none;">
     <svg viewbox="0 0 20 20"