1.1.2 • Published 2 years ago
@zu1662/watermark-vue v1.1.2
@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 |