watermark-component-for-react
1.0.0 • Public • Published Install
npm install --save watermark-component-for-react
Usage
import React from 'react';
import WaterMark from 'watermark-component-for-react';
import * as styles from './index.css';
class ReactDemo extends React.Component{
render () {
const content = `内部文档,请勿外传 by-前端小黑`;
return (
<WaterMark content={content}>
<div className={styles.wrapper}>hello world</div>
</WaterMark>
);
}
}
export default ReactDemo;
Props
成员 |
说明 |
类型 |
默认值 |
style |
watermark最外层组件内联样式 |
undefined | object |
undefined |
container |
容器 |
HTMLDivElement |
document.body |
width |
canvas元素宽 |
string |
300 |
height |
canvas元素高 |
string |
200 |
textAlign |
绘制文本的对齐方式 |
string |
left |
textBaseline |
文本基准线 |
string |
bottom |
font |
字体大小及样式 |
string |
16px Microsoft Yahei |
fillStyle |
自定义水印的颜色 |
string |
black |
content |
水印内容 |
string |
内部文档,请勿外传 |
globalAlpha |
设置图形和图像透明度的值 |
number |
0.1 |
rotate |
文字旋转角度 |
number |
16 |
zIndex |
元素堆叠顺序 |
number |
1000 |
Feature
- 使用
MutationObserve
监视 DOM 的变动,水印不可被删除、且属性不可被修改。
- 丰富的 props 使得水印组件可实现定制化需求。
Package Sidebar
Install
npm i watermark-component-for-react
Weekly Downloads