mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Watermark): improve image watermark demos (#11741)
This commit is contained in:
neverland
GitHub
parent
9008df9e90
commit
7444543bc1
@ -18,66 +18,65 @@ app.use(Watermark);
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
### Text Watermark
|
||||
|
||||
Use the `content` prop to set the text of the watermark.
|
||||
|
||||
```html
|
||||
<!-- text watermark -->
|
||||
<van-watermark content="Vant" />
|
||||
```
|
||||
|
||||
<!-- image watermark -->
|
||||
<van-watermark image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
|
||||
### Image Watermark
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
<van-watermark
|
||||
image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
|
||||
:gap-x="20"
|
||||
image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
|
||||
:gap-x="30"
|
||||
:gap-y="10"
|
||||
/>
|
||||
```
|
||||
|
||||
### 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"
|
||||
:opacity="0.2"
|
||||
/>
|
||||
```
|
||||
|
||||
### 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
|
||||
<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"
|
||||
:opacity="0.2"
|
||||
/>
|
||||
```
|
||||
|
||||
### 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
|
||||
<van-watermark
|
||||
image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
|
||||
:opacity="0.2"
|
||||
:full-page="true"
|
||||
content="vant watermark"
|
||||
font-color="rgba(0, 0, 0, 0.15)"
|
||||
>
|
||||
</van-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
|
||||
<van-watermark :width="150">
|
||||
|
||||
@ -18,36 +18,35 @@ app.use(Watermark);
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
### 文字水印
|
||||
|
||||
通过 `content` 属性来设置水印的文字。
|
||||
|
||||
```html
|
||||
<!-- 文字水印 -->
|
||||
<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
|
||||
<van-watermark
|
||||
image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
|
||||
:gap-x="20"
|
||||
image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
|
||||
:gap-x="30"
|
||||
:gap-y="10"
|
||||
/>
|
||||
```
|
||||
|
||||
### 自定义透明度
|
||||
|
||||
通过 `opacity` 属性来控制水印的整体透明度。
|
||||
|
||||
```html
|
||||
<van-watermark
|
||||
image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
|
||||
:opacity="0.5"
|
||||
:opacity="0.2"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -57,22 +56,22 @@ app.use(Watermark);
|
||||
|
||||
```html
|
||||
<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"
|
||||
:opacity="0.2"
|
||||
/>
|
||||
```
|
||||
|
||||
### 显示范围
|
||||
|
||||
通过 `fullPage` 属性来控制水印的显示范围。
|
||||
通过 `full-page` 属性来控制水印的显示范围。
|
||||
|
||||
```html
|
||||
<van-watermark
|
||||
image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
|
||||
:opacity="0.2"
|
||||
:full-page="true"
|
||||
content="vant watermark"
|
||||
font-color="rgba(0, 0, 0, 0.15)"
|
||||
>
|
||||
</van-watermark>
|
||||
/>
|
||||
```
|
||||
|
||||
### HTML 水印
|
||||
@ -97,7 +96,7 @@ app.use(Watermark);
|
||||
| height | 水印高度 | _number_ | `100` |
|
||||
| z-index | 水印的 z-index | _number \| string_ | `100` |
|
||||
| content | 文字水印的内容 | _string_ | - |
|
||||
| image | 图片水印的内容，如果与 content 同时传入，优先使用图片水印 | _string_ | - |
|
||||
| image | 图片水印的内容，如果与 `content` 同时传入，优先使用图片水印 | _string_ | - |
|
||||
| full-page | 水印是否全屏显示 | _boolean_ | `false` |
|
||||
| gapX | 水印之间的水平间隔 | _number_ | `0` |
|
||||
| gapY | 水印之间的垂直间隔 | _number_ | `0` |
|
||||
|
||||
@ -27,65 +27,45 @@ const t = useTranslate({
|
||||
imageWatermark: 'Image Watermark',
|
||||
},
|
||||
});
|
||||
const baseWatermarkFlag = ref<'text' | 'image'>('text');
|
||||
|
||||
const fullPage = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block :title="t('textWatermark')">
|
||||
<div class="demo-watermark-wrapper">
|
||||
<van-watermark content="Vant" :full-page="false" />
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('imageWatermark')">
|
||||
<div class="demo-watermark-wrapper">
|
||||
<div style="position: relative; z-index: 9999">
|
||||
<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>
|
||||
<van-watermark
|
||||
content="Vant"
|
||||
v-if="baseWatermarkFlag === 'text'"
|
||||
image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
|
||||
:opacity="0.2"
|
||||
: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>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customGap')">
|
||||
<div class="demo-watermark-wrapper">
|
||||
<van-watermark
|
||||
image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
|
||||
:gap-x="20"
|
||||
image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
|
||||
:gap-x="30"
|
||||
:gap-y="10"
|
||||
:opacity="0.2"
|
||||
:full-page="false"
|
||||
/>
|
||||
</div>
|
||||
</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')">
|
||||
<div class="demo-watermark-wrapper">
|
||||
<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"
|
||||
:opacity="0.2"
|
||||
:full-page="false"
|
||||
/>
|
||||
</div>
|
||||
@ -93,13 +73,13 @@ const fullPage = ref(false);
|
||||
|
||||
<demo-block :title="t('displayRange')">
|
||||
<div class="demo-watermark-wrapper">
|
||||
<van-button @click="fullPage = !fullPage">
|
||||
<van-button type="primary" @click="fullPage = !fullPage">
|
||||
{{ t('switch') }}
|
||||
</van-button>
|
||||
<van-watermark
|
||||
:full-page="fullPage"
|
||||
content="vant watermark"
|
||||
font-color="rgba(0, 0, 0, 0.15)"
|
||||
:opacity="0.2"
|
||||
image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
|
||||
>
|
||||
</van-watermark>
|
||||
</div>
|
||||
|
||||
@ -58,7 +58,8 @@ describe('watermark', () => {
|
||||
const wrapper = mount(Watermark, {
|
||||
props: {
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user