blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
neverland 2023-04-08 19:32:10 +08:00 committed by GitHub
parent 7444543bc1
commit 0a5e26de15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/vant/src/watermark/README.md
View File

@ -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

10
packages/vant/src/watermark/README.zh-CN.md
View File

@ -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

8
packages/vant/src/watermark/Watermark.tsx
View File

@ -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>;

8
packages/vant/src/watermark/demo/index.vue
View File

@ -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>

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

@ -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"