mini-yu/uni_modules/tdesign-uniapp/components/watermark/README.md

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	-