@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|