npm.io
2.0.8-beta.1 • Published 1 year ago

@aplus-frontend/watermark

Licence
Apache-2.0
Version
2.0.8-beta.1
Deps
0
Size
26 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

@aplus-frontend/watermark

网站页面添加水印，内部使用了MutationObserver监听dom变化，当水印被删除时候调用deleteWatermarkCallback可以用来将信息上传到sentry

NPM Version NPM Downloads NPM License

基本使用

import { watermark } from '@aplus-frontend/watermark'
watermark({
  content: 'aplus 水印',
})

水印相关Props

参数 说明 类型 默认值
container 承载水印的父容器 HTMLElement document.body
width 水印的宽度 string 300px
height 水印的高度 string 200px
textAlign 文本对其方式 "start" or "end" or "center" or "left" or "right" center
textBaseline 文本对其方式 "alphabetic" or "top" or "hanging" or "middle" or "ideographic" or "bottom" middle
font 文字样式 string rgba20px Microsoft Yahei
fillStyle 文字的颜色 string Record<string, any> rgba(191, 191, 191, 0.15)
content 填充文本 string 水印
content 水印文本旋转的角度 number 30
zIndex 水印的高度 number 10000
deleteWatermarkCallback 水印被删除触发回调，可以用来告警 （）=>void -

蒙层相关Props

参数 说明 类型 默认值
demoMode 是否开启演示模式 boolean false
deleteMaskCallback 演示蒙层被删除触发回调，可以用来告警 （）=>void -
switchUserCallback 切换用户的回调 （）=>void -

方法

  • setOption 修改配置项(重新生成水印与蒙层)
  • createMask 生成演示蒙层
  • removeMask 移除演示蒙层