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