2.1.0 • Published 2 years ago

watermark-h5 v2.1.0

Weekly downloads
2
License
ISC
Repository
github
Last release
2 years ago

概要

一款适用于web页面的水印SDK Add watermark on Web page

特点

  • 简单易用,适用于多种项目框架
  • 可自定义水印文本,颜色,大小,以及位置
  • 监控 DOM 变化,实现水印不可删除
  • ...

avatar

使用

1. 通过script标签引入

安装

npm install watermark-h5 --save-d

使用

// 注意:js需要放body最下面引入,防止初始化失败
<script src="./watermark.min.js"></script>
// 会将对象watermark挂载到全局window对象上

<script>
    watermark.init();
</script>

2. 通过npm安装

安装

npm install watermark-h5 --save

使用

import watermark from 'watermark-h5'

watermark.init()

3. 自定义水印

init()函数支持以下参数:

  parentDomName: string, // 父节点dom选择器名字
  show: boolean, // 水印开关
  color: string, // 水印色值
  title: string, // 显示的水印文本
  width: number, // 水印宽高
  height: number,
  fontNum: number, // 水印字体大小
  rotate: number, // 旋转角度
  zIndex: number, 

// 默认值

defaultConfig = {
    parentDomName: 'body',
    show: true,
    color: 'rgba(0, 0, 0, 0.06)',
    title: '严禁外传',
    width: 200,
    height: 200,
    fontNum: 15,
    rotate: -25,
    zIndex: 9999
}

4. 删除水印

watermark.clear()

5. 展示水印

watermark.show()

vue3 + vite + ts 项目中使用

可能会有报错:Could not find a declaration file for module 'watermark-h5'.

需要声明一下类型:

avatar

1.2.0

2 years ago

1.0.2

2 years ago

1.1.0

2 years ago

1.0.0

2 years ago

2.1.0

2 years ago

2.0.0

2 years ago

1.3.0

2 years ago

0.0.1

3 years ago