wiz-watermark

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	string	grid	水印样式， grid, position, diy
watermarkClass	string	-	水印容器class类名
rotate	number	-30	水印旋转角度
content	string,array	水印文字	水印内容,文字或[{title:'水印内容'}]
size	number	1	水印数量,如content设置为array类型,此参数无效
contentStyle	object	-	css样式配置,如{color:'red',textAlign:'left'},优先使用驼峰命名

mode = 'grid'

属性	类型	默认值	说明
col	number	12	栅格布局,对应宽度比例, 1~12
rowJustify	string	center	flex对应的主轴排列方式,end、center、around、between, start。(水平方向)
rowAlign	string	center	flex对应的侧轴排列方式, end、center、start, between。(垂直方向)
rowWarp	boolean	true	是否为多列形式水印
colWarp	boolean	true	水印内容是否可以换行

mode = 'position'

属性	类型	默认值	说明
fixed	boolean	false	是否采用定位模式
position	string	m-center	仅用于非定位模式 t ,m ,b 垂直-上中下, left center right 水平-上中下

mode= 'diy'

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

import WizWatermark from 'wiz-watermark'

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