Watermark 水印组件

一个使用 vue3 开发水印组件

安装

npm i @jkun/watermark-vue

使用

import watermark from "@jkun/watermark-vue";
import { createApp } from "vue";
createApp().use(watermark);

如果引入是 umd 模块则无需手动引入 css（@jkun/watermark-vue/dist/watermark.umd.js）

基础用法

只添加 content 即可使用水印组件

<watermark-vue
    content="测试水印"
    style="height: 400px"
    :font="{ fontSize: 12 }"></watermark-vue>

设置字体样式

通过修改font属性去更改字体相关的配置

<watermark-vue
    content="测试水印"
    style="min-height: 400px"
    :font="{
        fontSize: 16,
        color: 'rgba(100,108,255,0.4)',
        fontStyle: 'italic',
    }"
    image="/images/watermark.png"></watermark-vue>

图片水印

通过修改image属性去设置图片水印

<watermark-vue
    content="测试水印"
    style="height: 400px"
    :font="{
        fontSize: 16,
        color: 'rgba(100,108,255,0.4)',
        fontStyle: 'italic',
    }"
    image="/images/watermark.png"></watermark-vue>

提示

为保证图片高清且不被拉伸，请设置 width 和 height, 并上传至少两倍的宽高的 logo 图片地址。

Api

Props

| prop | 描述 | 类型 | 默认值 | | ------- | -------------- | ------ | ---------- | --- | | content | 内容 | string | string[] | | | font | font | object | 见 font | | gap | 间隔 | array | [100, 100] | | width | 宽度 | string | 100% | | height | 高度 | string | 100% | | offset | 偏移 | array | | | rotate | 水印的旋转角度 | number | -22 | | zIndex | 水印的层级 | number | 9 | | image | 图片 url | string | |

font

key	描述	类型	默认值
fontFamily	字体，同 css 中的 font-family	string	PingFang SC, sans-serif
fontSize	字体大小	number	14
fontStyle	字体样式，同 css 中的 font-style	string	normal
color	字体颜色	string	normal
fontWeight	字体粗细，同 css 中的 font-weight	string	normal