wiz-watermark

wiz-watermark 是一个基于react实现的文字水印插件,可生成多行多列、指定位置的文字水印。也可以发挥你的想象力在容器中编写你想要的水印内容。适配PC与移动端。

Demo

安装

• npm install git+https://gitlab.wizlong.com/sgm2.0/frontend/wiz-watermark

基本使用

import WizWatermark from 'wiz-watermark'

const App = () => {

  	// 配置项目
  let wizWatermarkConfig = {

  	mode:'grid', // 采用栅格模式,
  	size: 6 , // 总计需要渲染6个水印
  	col:6, // 每个水印占用栅格布局 6/12
  	content:'wiz-watermark', // 水印文字内容,
  	rotate:-30, // 水印文字旋转角度
  	contentStyle:{  // 配置你需要的css样式
  	   color:'red'
  	}
  }

  return (
  	<div>
  		<WizWatermark {...wizWatermarkConfig} />
  	</div>
  )
}

参数配置

mode = 'grid'

mode = 'position'

mode= 'diy'

自定义内容,仅挂载一个透明的dom盒子,水印样式可在容器内部中使用

import WizWatermark from 'wiz-watermark'

<WizWatermark mode='diy'>
    <!-- 水印内容自己编写 -->
</WizWatermark>