feat(Watermark): support opacity to be a string (#11742)

packages/vant/src/watermark/README.md

@@ -33,7 +33,7 @@ Use the `image` prop to set the watermark image, and use `opacity` prop to adjus
 ```html
 <van-watermark
   image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
-  :opacity="0.2"
+  opacity="0.2"
 />
 ```
 
@@ -46,7 +46,7 @@ Use `gap-x` `gap-y` prop to control the gap between watermark items.
   image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
   :gap-x="30"
   :gap-y="10"
-  :opacity="0.2"
+  opacity="0.2"
 />
 ```
 
@@ -58,7 +58,7 @@ Use `rotate` prop to control the rotate of watermark. The default value is `-22`
 <van-watermark
   image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
   rotate="22"
-  :opacity="0.2"
+  opacity="0.2"
 />
 ```
 
@@ -69,7 +69,7 @@ Use the `full-page` prop to control the display range of the watermark.
 ```html
 <van-watermark
   image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
-  :opacity="0.2"
+  opacity="0.2"
   :full-page="true"
 />
 ```
@@ -101,7 +101,7 @@ Use the `default` slot to pass HTML directly. Inline styles are supported, and s
 | gapX | Horizontal spacing between watermarks | _number_ | `0` |
 | gapY | Vertical spacing between watermarks | _number_ | `0` |
 | font-color | Color of text watermark | _string_ | `#dcdee0` |
-| opacity | opacity of watermark | _number_ | `1` |
+| opacity | Opacity of watermark | _number \| string_ | - |
 
 ### Slots
 

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

@@ -33,7 +33,7 @@ app.use(Watermark);
 ```html
 <van-watermark
   image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
-  :opacity="0.2"
+  opacity="0.2"
 />
 ```
 
@@ -46,7 +46,7 @@ app.use(Watermark);
   image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
   :gap-x="30"
   :gap-y="10"
-  :opacity="0.2"
+  opacity="0.2"
 />
 ```
 
@@ -58,7 +58,7 @@ app.use(Watermark);
 <van-watermark
   image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
   rotate="22"
-  :opacity="0.2"
+  opacity="0.2"
 />
 ```
 
@@ -69,7 +69,7 @@ app.use(Watermark);
 ```html
 <van-watermark
   image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
-  :opacity="0.2"
+  opacity="0.2"
   :full-page="true"
 />
 ```
@@ -101,7 +101,7 @@ app.use(Watermark);
 | gapX | 水印之间的水平间隔 | _number_ | `0` |
 | gapY | 水印之间的垂直间隔 | _number_ | `0` |
 | font-color | 文字水印的颜色 | _string_ | `#dcdee0` |
-| opacity | 水印的透明度 | _number_ | `1` |
+| opacity | 水印的透明度 | _number \| string_ | - |
 
 ### Slots
 

packages/vant/src/watermark/Watermark.tsx

@@ -21,17 +21,17 @@ import {
 const [name, bem] = createNamespace('watermark');
 
 export const watermarkProps = {
+  gapX: makeNumberProp(0),
+  gapY: makeNumberProp(0),
+  image: String,
   width: makeNumberProp(100),
   height: makeNumberProp(100),
   rotate: makeNumericProp(-22),
   zIndex: numericProp,
   content: String,
-  image: String,
+  opacity: numericProp,
   fullPage: truthProp,
-  gapX: makeNumberProp(0),
-  gapY: makeNumberProp(0),
   fontColor: makeStringProp('#dcdee0'),
-  opacity: makeNumberProp(1),
 };
 
 export type WatermarkProps = ExtractPropTypes<typeof watermarkProps>;

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

@@ -42,7 +42,7 @@ const fullPage = ref(false);
     <div class="demo-watermark-wrapper">
       <van-watermark
         image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
-        :opacity="0.2"
+        opacity="0.2"
         :full-page="false"
       />
     </div>
@@ -54,7 +54,7 @@ const fullPage = ref(false);
         image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
         :gap-x="30"
         :gap-y="10"
-        :opacity="0.2"
+        opacity="0.2"
         :full-page="false"
       />
     </div>
@@ -65,7 +65,7 @@ const fullPage = ref(false);
       <van-watermark
         image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
         rotate="22"
-        :opacity="0.2"
+        opacity="0.2"
         :full-page="false"
       />
     </div>
@@ -78,7 +78,7 @@ const fullPage = ref(false);
       </van-button>
       <van-watermark
         :full-page="fullPage"
-        :opacity="0.2"
+        opacity="0.2"
         image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
       >
       </van-watermark>

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

@@ -9,7 +9,7 @@ exports[`watermark should render content 1`] = `
          width="100"
          height="100"
          xmlns="http://www.w3.org/2000/svg"
-         style="padding: 0px 0px 0px 0px; opacity: 1;"
+         style="padding: 0px 0px 0px 0px;"
     >
       <foreignObject x="0"
                      y="0"
@@ -38,7 +38,7 @@ exports[`watermark should render html 1`] = `
          width="100"
          height="100"
          xmlns="http://www.w3.org/2000/svg"
-         style="padding: 0px 0px 0px 0px; opacity: 1;"
+         style="padding: 0px 0px 0px 0px;"
     >
       <foreignObject x="0"
                      y="0"
@@ -89,7 +89,7 @@ exports[`watermark test false value fullPage 1`] = `
          width="100"
          height="100"
          xmlns="http://www.w3.org/2000/svg"
-         style="padding: 0px 0px 0px 0px; opacity: 1;"
+         style="padding: 0px 0px 0px 0px;"
     >
       <foreignObject x="0"
                      y="0"
@@ -116,7 +116,7 @@ exports[`watermark test width, height, rotate, zIndex 1`] = `
          width="20"
          height="20"
          xmlns="http://www.w3.org/2000/svg"
-         style="padding: 0px 0px 0px 0px; opacity: 1;"
+         style="padding: 0px 0px 0px 0px;"
     >
       <foreignObject x="0"
                      y="0"