You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
929 B
35 lines
929 B
2 years ago
|
|
||
|
|
## 代码演示
|
||
|
|
|
||
|
|
### 基础用法
|
||
|
|
|
||
|
|
将 WaterMark 组件放在页面中，可以通过`content`字段设置水印显示内容，通过`width`和`height`设置单个水印的高度与宽度，展示一个全屏的水印。
|
||
|
|
|
||
|
|
```html
|
||
|
|
<hd-water-mark content="fant-mini-plus" :width="130" :height="130"></hd-water-mark>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 图片水印
|
||
|
|
|
||
|
|
通过`image`字段设置图片地址，通过`image-width`和`image-height`字段设置水印图片的宽高。
|
||
|
|
|
||
|
|
```html
|
||
|
|
<hd-water-mark image="https://fant-mini-plus.top/img/spaceship.png" :image-width="38" :image-height="38"></hd-water-mark>
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
### 局部水印
|
||
|
|
|
||
|
|
通过`full-screen`设置是否为全屏水印。
|
||
|
|
|
||
|
|
```html
|
||
|
|
<hd-water-mark content="fant-mini-plus" :full-screen="false"></hd-water-mark>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 自定义层级和透明度
|
||
|
|
|
||
|
|
通过`opacity`设置透明度、`z-index`设置水印层级。
|
||
|
|
|
||
|
|
```html
|
||
|
|
<hd-water-mark content="fant-mini-plus" :opacity="0.4"></hd-water-mark>
|
||
|
|
```
|