65 lines
3.5 KiB
Markdown
65 lines
3.5 KiB
Markdown
|
# Watermark 水印
|
|||
|
|
|
|||
|
|
在页面或组件上添加指定的图片或文字，可用于版权保护、品牌宣传等场景。
|
|||
|
|
|
|||
|
|
## 基础用法
|
|||
|
|
|
|||
|
|
将 WaterMark 组件放在页面中，可以通过`content`字段设置水印显示内容，通过`width`和`height`设置单个水印的高度与宽度，展示一个全屏的水印。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-watermark content="wot-design-uni" :width="130" :height="130"></wd-watermark>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 图片水印
|
|||
|
|
|
|||
|
|
通过`image`字段设置网络图片地址或Base64图片，通过`image-width`和`image-height`字段设置水印图片的宽高。
|
|||
|
|
**注意：钉钉小程序平台仅支持网络图片。**
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-watermark image="https://wot-ui.cn/logo.png" :image-width="38" :image-height="38"></wd-watermark>
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 局部水印
|
|||
|
|
|
|||
|
|
通过`full-screen`设置是否为全屏水印。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-watermark content="wot-design-uni" :full-screen="false"></wd-watermark>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 自定义层级和透明度
|
|||
|
|
|
|||
|
|
通过`opacity`设置透明度、`z-index`设置水印层级。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-watermark content="wot-design-uni" :opacity="0.4"></wd-watermark>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Attributes
|
|||
|
|
|
|||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
|||
|
|
| ------------- | ------------------------ | ------- | ------------------------------------ | ------ | -------- |
|
|||
|
|
| `content` | 显示内容 | string | - | `''` | 0.1.16 |
|
|||
|
|
| `image` | 显示图片的地址，支持网络图片和base64（钉钉小程序支持网络图片） | string | - | `''` | 0.1.16 |
|
|||
|
|
| `imageHeight` | 图片高度 | number | - | `100` | 0.1.16 |
|
|||
|
|
| `imageWidth` | 图片宽度 | number | - | `100` | 0.1.16 |
|
|||
|
|
| `gutterX` | X轴间距，单位px | number | - | `0` | 0.1.16 |
|
|||
|
|
| `gutterY` | Y轴间距，单位px | number | - | `0` | 0.1.16 |
|
|||
|
|
| `width` | canvas画布宽度，单位px | number | - | `100` | 0.1.16 |
|
|||
|
|
| `height` | canvas画布高度，单位px | number | - | `100` | 0.1.16 |
|
|||
|
|
| `fullScreen` | 是否为全屏水印 | boolean | - | `true` | 0.1.16 |
|
|||
|
|
| `color` | 水印字体颜色 | string | - | `'#8c8c8c'` | 0.1.16 |
|
|||
|
|
| `size` | 水印字体大小，单位px | number | - | `14` | 0.1.16 |
|
|||
|
|
| `fontStyle` | 水印字体样式（仅微信、支付宝和h5支持） | string | `normal` / `italic` / `oblique` | `'normal'` | 0.1.16 |
|
|||
|
|
| `fontWeight` | 水印字体的粗细（仅微信、支付宝和h5支持） | string | `normal` / `bold` / `bolder` | `'normal'` | 0.1.16 |
|
|||
|
|
| `fontFamily` | 水印字体系列（仅微信、支付宝和h5支持） | string | - | `'PingFang SC'` | 0.1.16 |
|
|||
|
|
| `rotate` | 水印旋转角度 | number | - | `-25` | 0.1.16 |
|
|||
|
|
| `zIndex` | 自定义层级 | number | - | `1100` | 0.1.16 |
|
|||
|
|
| `opacity` | 自定义透明度，取值 0~1 | number | - | `0.5` | 0.1.16 |
|
|||
|
|
|
|||
|
|
|