Taroify

Watermark 水印

在页面上添加特定的文字或图案作为水印，可用于防止信息盗用。

import { Watermark } from "@taroify/core"

代码演示

通过 content 属性来设置水印的文字。

<Watermark content="Taroify" />

通过 image 属性来设置水印图片，并使用 opacity 来调整水印的整体透明度。

<Watermark
  image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
  opacity={0.2}
/>

通过 gapX 和 gapY 属性来控制多个重复水印之间的间隔。

<Watermark
  image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
  gapX={30}
  gapY={10}
  opacity={0.2}
/>

通过 rotate 属性来控制水印的倾斜角度，默认值为-11。

<Watermark
  image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
  rotate={22}
  opacity={0.2}
/>

通过 fullPage 属性来控制水印的显示范围。

<Watermark
  image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
  opacity={0.2}
  fullPage
/>

参数	说明	类型	默认值
width	水印宽度	number	`80`
height	水印高度	number	`80`
zIndex	水印的 z-index	number \| string	`100`
content	文字水印的内容	string	-
image	图片水印的内容，如果与 `content` 同时传入，优先使用图片水印	string	-
rotate	水印的旋转角度	number	`-11`
fullPage	水印是否全屏显示	boolean	`false`
gapX	水印之间的水平间隔	number	`20`
gapY	水印之间的垂直间隔	number	`20`
textColor	文字水印的颜色	string	`#dcdee0`
textSize	文字水印的大小	number	`20`
opacity	水印的透明度	number	-

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
—watermark-z-index	100	根节点的 z-index 层级