@zu1662/watermark-vue

@zu1662/watermark-vue

基于 @zu1662/watermark 的组件封装

使用

# npm
npm install @zu1662/watermark-vue

# yarn
yarn add @zu1662/watermark-vue

全局注册组件

// main ts
import WaterMarkInstall from '@zu1662/watermark-vue';
const app = Vue.createApp()
app.use(WaterMarkInstall)

// 使用
<template>
  <WaterMark ref="aaa" class="date-picker" text="测试人员" :visible="visible">
    <someCom />
  </WaterMark>
</template>

组件引用

<template>
  <WaterMark ref="aaa" class="date-picker" text="测试人员" :visible="visible">
    <someCom />
  </WaterMark>
</template>
<script>
import { WaterMark } from '@zu1662/watermark-vue';
export default defineComponent({
  components: {
    WaterMark,
  }
})
</script>

API

基本参数

参数	说明	类型	默认值
text	水印文本, 为数组时表示多行水印	string | string[]	-
visible	水印是否显示	boolean	true
options	高级参数	WatermarkOptions	null

高级参数

参数	说明	类型	默认值
monitor	是否开启保护模式	boolean	true
mode	展示模式，interval表示错行展示	string	interval
gapX	水印之间的水平间距	number	100
gapY	水印之间的垂直间距	number	100
offsetLeft	水印在 canvas 画布上绘制的水平偏移量	number	0
offsetTop	水印在 canvas 画布上绘制的垂直偏移量	number	0
width	单个水印宽度	number	120
height	单个水印高度	number	64
useClientHeight	是否使用元素或者父元素的ClientHeight	boolean	false
image	图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印	string	-
zIndex	水印层级	number	9999
width	单个水印宽度	number	120
height	单个水印高度	number	64
opacity	水印透明度	number	0.15
rotate	旋转的角度	number	-22
fontSize	设置字体大小	number	16
fontWeight	设置字体粗细	number | string	normal
fontStyle	规定字体样式	string	normal
fontVariant	规定字体变体	string	normal
fontColor	设置字体颜色	string	#000
fontFamily	设置水印文字的字体	string	sans-serif