116 lines
3.4 KiB
Markdown
116 lines
3.4 KiB
Markdown
|
---
|
|||
|
|
title: Watermark 水印
|
|||
|
|
description: 给页面的某个区域加上水印。
|
|||
|
|
spline: data
|
|||
|
|
isComponent: true
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 引入
|
|||
|
|
|
|||
|
|
可在 `main.ts` 或在需要使用的页面或组件中引入。
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
import TWatermark from '@tdesign/uniapp/watermark/watermark.vue';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 代码演示
|
|||
|
|
|
|||
|
|
### 组件类型
|
|||
|
|
|
|||
|
|
#### 文字水印
|
|||
|
|
|
|||
|
|
{{ base }}
|
|||
|
|
|
|||
|
|
#### 图片水印
|
|||
|
|
|
|||
|
|
{{ image }}
|
|||
|
|
|
|||
|
|
#### 图片灰阶水印
|
|||
|
|
|
|||
|
|
{{ gray }}
|
|||
|
|
|
|||
|
|
#### 多行图文水印
|
|||
|
|
|
|||
|
|
{{ multi-line }}
|
|||
|
|
|
|||
|
|
#### 多行图文灰阶水印
|
|||
|
|
|
|||
|
|
{{ multi-line-gray }}
|
|||
|
|
|
|||
|
|
#### 运动文字水印
|
|||
|
|
|
|||
|
|
{{ move-text }}
|
|||
|
|
|
|||
|
|
#### 运动图片水印
|
|||
|
|
|
|||
|
|
{{ move-image }}
|
|||
|
|
|
|||
|
|
### 不同布局的水印
|
|||
|
|
通过设置 layout 使用不同的布局。
|
|||
|
|
|
|||
|
|
{{ layout }}
|
|||
|
|
|
|||
|
|
|
|||
|
|
## API
|
|||
|
|
|
|||
|
|
### Watermark Props
|
|||
|
|
|
|||
|
|
名称 | 类型 | 默认值 | 描述 | 必传
|
|||
|
|
-- | -- | -- | -- | --
|
|||
|
|
custom-style | Object | - | 自定义样式 | N
|
|||
|
|
alpha | Number | 1 | 水印整体透明度，取值范围 [0-1] | N
|
|||
|
|
content | String | - | 水印所覆盖的内容节点 | N
|
|||
|
|
height | Number | - | 水印高度 | N
|
|||
|
|
is-repeat | Boolean | true | 水印是否重复出现 | N
|
|||
|
|
layout | String | rectangular | 水印的布局方式，rectangular：矩形，即横平竖直的水印；hexagonal：六边形，即错位的水印。可选项：rectangular/hexagonal | N
|
|||
|
|
line-space | Number | 16 | 行间距，只作用在多行（`content` 配置为数组）情况下 | N
|
|||
|
|
movable | Boolean | false | 水印是否可移动 | N
|
|||
|
|
move-interval | Number | 3000 | 水印发生运动位移的间隙，单位：毫秒 | N
|
|||
|
|
offset | Array | - | 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 `offset = [gapX / 2, gapY / 2]`。TS 类型：`Array<number>` | N
|
|||
|
|
removable | Boolean | true | 水印是否可被删除 | N
|
|||
|
|
rotate | Number | -22 | 水印旋转的角度，单位 ° | N
|
|||
|
|
watermark-content | Object / Array | - | 水印内容，需要显示多行情况下可配置为数组。TS 类型：`WatermarkText\|WatermarkImage\|Array<WatermarkText\|WatermarkImage>` | N
|
|||
|
|
width | Number | - | 水印宽度 | N
|
|||
|
|
x | Number | - | 水印之间的水平间距 | N
|
|||
|
|
y | Number | - | 水印之间的垂直间距 | N
|
|||
|
|
z-index | Number | - | 水印元素的 `z-index`，默认值写在 CSS 中 | N
|
|||
|
|
|
|||
|
|
### Watermark Slots
|
|||
|
|
|
|||
|
|
名称 | 描述
|
|||
|
|
-- | --
|
|||
|
|
\- | 默认插槽，作用同 `content` 插槽
|
|||
|
|
content | 自定义 `content` 显示内容
|
|||
|
|
|
|||
|
|
### WatermarkText
|
|||
|
|
|
|||
|
|
名称 | 类型 | 默认值 | 描述 | 必传
|
|||
|
|
-- | -- | -- | -- | --
|
|||
|
|
font-color | String | rgba(0,0,0,0.1) | 水印文本文字颜色 | N
|
|||
|
|
font-family | String | - | 水印文本文字字体 | N
|
|||
|
|
font-size | Number | 16 | 水印文本文字大小 | N
|
|||
|
|
font-weight | String | normal | 水印文本文字粗细。可选项：normal/lighter/bold/bolder | N
|
|||
|
|
text | String | - | 水印文本内容 | N
|
|||
|
|
|
|||
|
|
### WatermarkImage
|
|||
|
|
|
|||
|
|
名称 | 类型 | 默认值 | 描述 | 必传
|
|||
|
|
-- | -- | -- | -- | --
|
|||
|
|
is-grayscale | Boolean | false | 水印图片是否需要灰阶显示 | N
|
|||
|
|
url | String | - | 水印图片源地址，为了显示清楚，建议导出 2 倍或 3 倍图 | N
|
|||
|
|
|
|||
|
|
### CSS Variables
|
|||
|
|
|
|||
|
|
组件提供了下列 CSS 变量，可用于自定义样式。
|
|||
|
|
名称 | 默认值 | 描述
|
|||
|
|
-- | -- | --
|
|||
|
|
--watermark-left-0 | --watermark-left-0 | -
|
|||
|
|
--watermark-left-25 | --watermark-left-25 | -
|
|||
|
|
--watermark-left-50 | --watermark-left-50 | -
|
|||
|
|
--watermark-left-75 | --watermark-left-75 | -
|
|||
|
|
--watermark-top-0 | --watermark-top-0 | -
|
|||
|
|
--watermark-top-25 | --watermark-top-25 | -
|
|||
|
|
--watermark-top-50 | --watermark-top-50 | -
|
|||
|
|
--watermark-top-75 | --watermark-top-75 | -
|