3.4 KiB
3.4 KiB
title, description, spline, isComponent
| title | description | spline | isComponent |
|---|---|---|---|
| Watermark 水印 | 给页面的某个区域加上水印。 | data | true |
引入
可在 main.ts 或在需要使用的页面或组件中引入。
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 | - |