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

docs(Watermark): improve image watermark demos (#11741)

Browse Source
This commit is contained in:
neverland 2023-04-08 11:03:28 +08:00 committed by GitHub
parent 9008df9e90
commit 7444543bc1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 70 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,66 +18,65 @@ app.use(Watermark);
## Usage ## Usage
### Basic Usage ### Text Watermark
Use the `content` prop to set the text of the watermark.
```html ```html
<!-- text watermark -->
<van-watermark content="Vant" /> <van-watermark content="Vant" />
```
<!-- image watermark --> ### Image Watermark
<van-watermark image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
Use the `image` prop to set the watermark image, and use `opacity` prop to adjust the transparency of the watermark.
```html
<van-watermark
image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
:opacity="0.2"
/>
``` ```
### Custom Gap ### Custom Gap
Use `gapX` `gapY` attributes to control the gap between two watermark slice. Use `gap-x` `gap-y` prop to control the gap between watermark items.
```html ```html
<van-watermark <van-watermark
image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
:gap-x="20" :gap-x="30"
:gap-y="10" :gap-y="10"
/> :opacity="0.2"
```
### Custom Opacity
Use `opacity` attribute to control the entirety opacity.
```html
<van-watermark
image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
:opacity="0.5"
/> />
``` ```
### Custom Rotate ### Custom Rotate
Use `rotate` attribute to control the rotate of watermark. Default value is `-22`. Use `rotate` prop to control the rotate of watermark. The default value is `-22`.
```html ```html
<van-watermark <van-watermark
image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
rotate="22" rotate="22"
:opacity="0.2"
/> />
``` ```
### Display Range ### Display Range
Use the `fullPage` attribute to control the display range of the watermark. Use the `full-page` prop to control the display range of the watermark.
```html ```html
<van-watermark <van-watermark
image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
:opacity="0.2"
:full-page="true" :full-page="true"
content="vant watermark" />
font-color="rgba(0, 0, 0, 0.15)"
>
</van-watermark>
``` ```
### HTML Watermark ### HTML Watermark
Use the `default slot` to pass HTML directly. Inline styles are supported, and self-closing tags are not supported. Use the `default` slot to pass HTML directly. Inline styles are supported, and self-closing tags are not supported.
```html ```html
<van-watermark :width="150"> <van-watermark :width="150">

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

@ -18,36 +18,35 @@ app.use(Watermark);
## 代码演示 ## 代码演示
### 基础用法 ### 文字水印
通过 `content` 属性来设置水印的文字。
```html ```html
<!-- 文字水印 -->
<van-watermark content="Vant" /> <van-watermark content="Vant" />
```
<!-- 图片水印 --> ### 图片水印
<van-watermark image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
通过 `image` 属性来设置水印图片，并使用 `opacity` 来调整水印的整体透明度。
```html
<van-watermark
image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
:opacity="0.2"
/>
``` ```
### 自定义间隔 ### 自定义间隔
通过 `gapX` 和 `gapY` 属性来控制多个重复水印之间的间隔。 通过 `gap-x` 和 `gap-y` 属性来控制多个重复水印之间的间隔。
```html ```html
<van-watermark <van-watermark
image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
:gap-x="20" :gap-x="30"
:gap-y="10" :gap-y="10"
/> :opacity="0.2"
```
### 自定义透明度
通过 `opacity` 属性来控制水印的整体透明度。
```html
<van-watermark
image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
:opacity="0.5"
/> />
``` ```
@ -57,22 +56,22 @@ app.use(Watermark);
```html ```html
<van-watermark <van-watermark
image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
rotate="22" rotate="22"
:opacity="0.2"
/> />
``` ```
### 显示范围 ### 显示范围
通过 `fullPage` 属性来控制水印的显示范围。 通过 `full-page` 属性来控制水印的显示范围。
```html ```html
<van-watermark <van-watermark
image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
:opacity="0.2"
:full-page="true" :full-page="true"
content="vant watermark" />
font-color="rgba(0, 0, 0, 0.15)"
>
</van-watermark>
``` ```
### HTML 水印 ### HTML 水印
@ -97,7 +96,7 @@ app.use(Watermark);
| height | 水印高度 | _number_ | `100` | | height | 水印高度 | _number_ | `100` |
| z-index | 水印的 z-index | _number \| string_ | `100` | | z-index | 水印的 z-index | _number \| string_ | `100` |
| content | 文字水印的内容 | _string_ | - | | content | 文字水印的内容 | _string_ | - |
| image | 图片水印的内容，如果与 content 同时传入，优先使用图片水印 | _string_ | - | | image | 图片水印的内容，如果与 `content` 同时传入，优先使用图片水印 | _string_ | - |
| full-page | 水印是否全屏显示 | _boolean_ | `false` | | full-page | 水印是否全屏显示 | _boolean_ | `false` |
| gapX | 水印之间的水平间隔 | _number_ | `0` | | gapX | 水印之间的水平间隔 | _number_ | `0` |
| gapY | 水印之间的垂直间隔 | _number_ | `0` | | gapY | 水印之间的垂直间隔 | _number_ | `0` |

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

@ -27,65 +27,45 @@ const t = useTranslate({
imageWatermark: 'Image Watermark', imageWatermark: 'Image Watermark',
}, },
}); });
const baseWatermarkFlag = ref<'text' | 'image'>('text');
const fullPage = ref(false); const fullPage = ref(false);
</script> </script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('textWatermark')">
<div class="demo-watermark-wrapper"> <div class="demo-watermark-wrapper">
<div style="position: relative; z-index: 9999"> <van-watermark content="Vant" :full-page="false" />
<van-button type="primary" @click="baseWatermarkFlag = 'text'">
{{ t('textWatermark') }}
</van-button>
<van-button
type="primary"
style="margin: 0 var(--van-padding-md)"
@click="baseWatermarkFlag = 'image'"
>
{{ t('imageWatermark') }}
</van-button>
</div> </div>
</demo-block>
<demo-block :title="t('imageWatermark')">
<div class="demo-watermark-wrapper">
<van-watermark <van-watermark
content="Vant" image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
v-if="baseWatermarkFlag === 'text'" :opacity="0.2"
:full-page="false" :full-page="false"
></van-watermark> />
<van-watermark
image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
v-if="baseWatermarkFlag === 'image'"
:full-page="false"
></van-watermark>
</div> </div>
</demo-block> </demo-block>
<demo-block :title="t('customGap')"> <demo-block :title="t('customGap')">
<div class="demo-watermark-wrapper"> <div class="demo-watermark-wrapper">
<van-watermark <van-watermark
image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
:gap-x="20" :gap-x="30"
:gap-y="10" :gap-y="10"
:opacity="0.2"
:full-page="false" :full-page="false"
/> />
</div> </div>
</demo-block> </demo-block>
<demo-block :title="t('customOpacity')">
<div class="demo-watermark-wrapper">
<van-watermark
:full-page="false"
:opacity="0.5"
image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
>
</van-watermark>
</div>
</demo-block>
<demo-block :title="t('customRotate')"> <demo-block :title="t('customRotate')">
<div class="demo-watermark-wrapper"> <div class="demo-watermark-wrapper">
<van-watermark <van-watermark
image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
rotate="22" rotate="22"
:opacity="0.2"
:full-page="false" :full-page="false"
/> />
</div> </div>
@ -93,13 +73,13 @@ const fullPage = ref(false);
<demo-block :title="t('displayRange')"> <demo-block :title="t('displayRange')">
<div class="demo-watermark-wrapper"> <div class="demo-watermark-wrapper">
<van-button @click="fullPage = !fullPage"> <van-button type="primary" @click="fullPage = !fullPage">
{{ t('switch') }} {{ t('switch') }}
</van-button> </van-button>
<van-watermark <van-watermark
:full-page="fullPage" :full-page="fullPage"
content="vant watermark" :opacity="0.2"
font-color="rgba(0, 0, 0, 0.15)" image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
> >
</van-watermark> </van-watermark>
</div> </div>

3
packages/vant/src/watermark/test/index.spec.ts
View File

@ -58,7 +58,8 @@ describe('watermark', () => {
const wrapper = mount(Watermark, { const wrapper = mount(Watermark, {
props: { props: {
content: 'Vant', content: 'Vant',
image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg', image:
'https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png',
opacity: 0.5, opacity: 0.5,
}, },
}); });