Watermark 水印

介绍

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

引入

import { IBestWatermark } from "@ibestservices/ibest-ui";

文字水印

TIP

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

点我查看代码

IBestWatermark({
  text: 'iBest-UI',
  fontSize: 14,
  gapX: 40,
  gapY: 40
}){
  // 你的业务代码
}

图片水印

TIP

通过 imageUrl 属性来设置水印的图片。

点我查看代码

IBestWatermark({
  imageUrl: '图片链接',
  waterMarkWidth: 105,
  waterMarkHeight: 40,
  gapX: 20,
  gapY: 20,
  rotateDeg: 0
}){
  // 你的业务代码
}

自定义间隔

TIP

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

点我查看代码

IBestWatermark({
  text: 'iBest-UI',
  fontSize: 14,
  gapX: 80,
  gapY: 80
}){
  // 你的业务代码
}

自定义倾斜角度

TIP

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

点我查看代码

IBestWatermark({
  text: 'iBest-UI',
  fontSize: 14,
  gapX: 20,
  gapY: 20,
  rotateDeg: 0
}){
  // 你的业务代码
}

API

@Props

参数	说明	类型	默认值
waterMarkWidth	单个图片水印的宽度（文字水印可忽略该参数）	number	100
waterMarkHeight	单个图片水印的高度（文字水印可忽略该参数）	number	100
waterMarkOpacity	水印的透明度 0~1	number	0.3
gapX	水印之间的水平间隔	number	0
gapY	水印之间的垂直间隔	number	0
rotateDeg	水印的旋转角度	number	-22
imageUrl	水印的图片链接	string
text	文字水印的内容（文字水印优先级高于图片水印，如果同时传了text和imageUrl那么显示的将会是text的内容）	string
fontSize	文字水印的大小	number	30
fontFamily	文字字体	string	sans-serif
fontColor	文字颜色	string	#000000
waterMarkZIndex	水印的 z-index	number	-1

@BuilderParam 插槽

插槽名	说明	类型
defaultBuilder	水印包裹的子组件	CustomBuilder | null