waterMark

纯 js 水印生成 兼容 vue react

#依赖
yarn add @haoyunkai/watermark
npm install @haoyunkai/watermark
#div必须position:relative ;
<template>
    <div id="id" style="height: 200px;position:relative;">
    </div>
</template>
<script>
# 引入
    import Watermark from "@haoyunkai/watermark";
    #在元素生成完成生命周期 运行
    Watermark.set(document.getElementById('id'),"options");
    #可配置参数
    options={
        text : "", 
        ...
    }
</script>

方法

方法名称 | 字段解释 | 传参方式
---- | ----- | ------
set | 生成 | set（获取元素,options） clear | 删除单个水印 | clear(name) clearAll | 删除全部水印 当前页面销毁要清除水印 | clearAll()

options

字段 | 字段解释 | 默认值
---- | ----- | ------
text | 水印文案 | 默认空 name | 删除单个清除时传参 | 默认不填 width | 宽度 | 默认 120 height | 高度 | 默认 120 fontSize | 文字大小 | 默认 120 rotate | 旋转文字角度 | 默认 -10 top | 上边距 | 默认 0 left | 左边距 | 默认 0 right | 右边距 | 默认 0 bottom | 下边距 | 默认 -10 adaptive | 开启自适应宽度 | 默认 false adaptiveWidth | 自适应宽度计算方式 文字大小+自适应数加字数 | 默认 10 rotateDivAdaptive | 旋转自适应宽高 | 默认 false rotateDivWidth | 默认旋转div宽 | 默认 10000 rotateDivHeight | 默认旋转div高 | 默认 10000 rotateDivDeg | 旋转角度 | 默认 40