Skip to content
Add watermark to react components in a more elegant way
JavaScript
Branch: master
Clone or download
Latest commit 3d699c6 Aug 2, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Loading add badges Aug 2, 2019
WaterMark add badges Aug 2, 2019
dist
docs feat:add badges Aug 2, 2019
.babelrc
.gitignore
README.md add badges Aug 2, 2019
index.js fix:delete ; Jul 29, 2019
package.json
webpack.dev.config.js
webpack.prod.config.js init Jul 5, 2019

README.md

watermark-enhancer

Add watermark to your react components in a more elegent way.

casecase

移步详细文档

1.安装

npm i watermark-enhancer -d

2.使用

import EnhancerWaterMark from 'watermark-enhancer'
export default EnhancerWaterMark({
  width: '100',
  height: '80',
  rotate: '17',
  content: 'test',
  asyncContent: renderEffectContent,
}, {
  content: 'watermark loading...',
  color: 'black',
  background: 'white'
})(WrappedComponent)

3.注意

  • 参数说明
    EnhancerWaterMark(
      watermarkOptions = {
        content : 'sync content',
        asyncContent: renderEffectContent,
      }, // 水印参数, 水印内容可异步获取
      loadingOptions = {
        ...loadingStyle,
        content: 'loading...'
      }, // loading遮罩层配置
    )(WrappedComponent) // 传入需要加上水印的组件
    
  • 同步的水印内容
    EnhancerWaterMark(
      options = {
        + content: '水印',
        width,
        height,
        ...  
      }, 
    )(WrappedComponent)
    
  • 异步的水印内容
    EnhancerWaterMark(
      - content,
      + asyncContent: renderEffectContent,  
      options = {
        width,
        height,
        ...  
      }, 
    )(WrappedComponent)
    
You can’t perform that action at this time.