1.0.0 • Published 4 years ago
watermark-component-for-react v1.0.0
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 使得水印组件可实现定制化需求。
1.0.0
4 years ago